webApp
关注
分享
扫一扫
UIEngineer
玩中学！
展开
-
响应式布局
响应式网页设计的快速教程（适合个人站点）http://www.jb51.net/css/229246.html用3个步骤实现响应式网页设计http://blog.youkuaiyun.com/hfahe/article/details/7082718/响应式设计入门教程http://outofmemory.cn/code-snippet/3063/response-shi-转载 2017-10-07 15:30:23 · 264 阅读 · 0 评论 -
采用rem高仿网易新闻h5版新闻列表页
一、页面框架搭建(构建，scss) 终端输入webpack --watch可以执行webpack文件侦听并打包二、页面样式编写三、rem计算代码编写四、适配多种机型大小，resize完善代码如下： 文件目录 app.jsrequire('./index.scss'); // 引入scss文件// 获取屏幕宽度(viewport宽度)let htmlWidth =原创 2018-02-16 14:59:52 · 6001 阅读 · 0 评论 -
rem单位 -- 响应式布局
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8">原创 2018-05-23 12:26:07 · 579 阅读 · 0 评论 -
webapp在线调试的技巧
需求： 需要在真机上调试样式方案： 利用同个局域网下，查看电脑的ip地址 利用ipconfig/all 指令查看ip地址 然后用在同个局域网下的手机访问ip加上端口号就可以...原创 2018-06-13 12:17:53 · 1051 阅读 · 0 评论 -
h5页面唤醒手机拨号，发短信功能
拨号：<a href="tel://0769-22210105">联系客服</a>发短信：<a href="sms:10086?body=message_body">给10086发短信</a>发送地理定位：<a href="geopoint:116.281469,39.866035"&原创 2018-06-13 12:22:49 · 3281 阅读 · 1 评论 -
待服务条款登录界面的html5手机登录界面
html:<!doctype html><html><head><meta charset="utf-8"><title>待服务条款登录界面的html5手机登录界面</title><meta name="viewport" content="width=devi原创 2018-08-02 12:24:40 · 2087 阅读 · 0 评论 -
使用less自动进行移动端rem适配计算
在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。目录结构如下：某宝rem适配文件flexible.js看起来还不错，1rem=37.5px（苹果6下）// JavaScri...原创 2019-02-21 12:09:52 · 6257 阅读 · 0 评论 -
PWA(Progressive Web Apps)（渐进式web应用程序）的出现
优势：原创 2019-03-17 19:20:17 · 351 阅读 · 0 评论 -
rem练手 - 蓝色旅游网
html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>蓝色手机WAP旅游原创 2019-03-18 12:27:47 · 197 阅读 · 0 评论 -
vueci移动端初探(lib-flexible + px2rem)
需求：制作一个HTML5海报生成系统安装lib-flexiblecnpm i lib-flexible --save安装px2remcnpm i px2rem-loader --save-dev引入flexible入口文件main.js中引入：import 'lib-flexible/flexible.js'配置px2rembuild/utils.js中：增加红色部分...原创 2019-04-25 19:58:54 · 966 阅读 · 0 评论 -
移动前端——通过Chrome自带的开发者工具Emulation模拟移动设备访问网站
一、使用方法通过快捷键F12或ctrl+shift+i打开开发者工具，点击左上角类似手机的图标即可查看到Emulation所在的目录；二、关于Emulation原创 2019-05-03 13:59:39 · 4915 阅读 · 0 评论 -
移动web开发适配rem
我原创 2018-02-16 12:26:20 · 410 阅读 · 1 评论 -
移动web - 触摸touch
弹性滚动 当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让 我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。移动web页面也是拥有这样的能力的，但滚动有几种情况需要考虑： body层滚动：(系统特殊化处理) 自带弹性滚动，overflow:hidden 失效，GIF和定时器暂停局部滚动 没有没有弹性滚动，没有滚动惯性，不流畅局部滚动开启弹性滚动 下拉刷新：顶端下拉一小点距原创 2018-02-27 22:29:53 · 249 阅读 · 0 评论 -
移动端的canvas电子签名
移动端的canvas电子签名效果，使用的是touch事件，pc端不支持canvas设置的是手机端全屏宽高，可自己进行设置，手指滑动即可html：效果图：转载 2017-10-07 15:36:06 · 6479 阅读 · 0 评论 -
移动端兼容性问题总结0
选项卡+echarts3做的图表，第二个选项卡的main宽度定义为100%出现bug解决方案：动态获取设备的宽度，然后给main赋值 var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; $(“#echmonth”).width(width);转转载 2017-10-08 14:26:20 · 245 阅读 · 0 评论 -
html经典布局(适用于移动端)
主要采用流式布局flex布局实现。 在很多时候，移动端页面一个层常分列，但浏览器屏幕差别，用浮动，或者定位写老是出现一堆或大或小的差错，此时用流式布局就可避免这些错误。代码： <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/cs转载 2017-10-08 14:10:31 · 3170 阅读 · 0 评论 -
浅谈移动优先的跨终端Web 解决方案
1、基准 我们定义测试基准和开发基准，也就是说我们定义我们在哪些浏览器上去进行调试。 左侧图主要是定义PC上的基准，其中A级项目中必须支持，B级可选，C级观察。2、检测 主要是终端检测 这是一张架构图，其中紫色虚线部分是前置服务器，蓝色虚线部分是应用层服务器。 在前置服务器中有一个模块，根据UA返回一些信息。那返回什么信息呢？继续看图如下： 有这么几个属性，sw、sh是屏幕宽原创 2017-10-27 20:02:27 · 1274 阅读 · 0 评论 -
移动优先的跨终端web概述
一. 1.单域 - Media Query 2.单域 - 多模板(针对PC或mobile做多个模板) 3.多域 - 跳转 4.多平台 App(为不同的平台做不同的App)二.目的：也页面达到所有终端三.移动优先(Mobile First)原创 2017-10-26 21:02:44 · 480 阅读 · 0 评论 -
Hello，移动WEB
一、移动web的基础知识 1.移动开发像素知识px：逻辑像素，浏览器使用的抽象单位dp，pt：设备无关像素或物理像素dpr：设像素缩放比计算公式：1px = (dpr)的平方*dp iphone的dpr为2，所以物理像素为640dp*1136dp, 所以逻辑像素为320px*568px;DPI:打印机每英寸可以喷的墨汁点(印刷行业) PPI：屏幕每英寸的像素数量，即单位...原创 2018-02-27 20:39:21 · 217 阅读 · 0 评论 -
响应式设计
我原创 2018-02-27 21:12:32 · 170 阅读 · 0 评论 -
移动web特别样式处理
高清图片 在移动页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp width:(w_value/dpr)px; height:(h_value/dpr)px;2.1 像素边框 3.相对单位rem 不使用rem的情况：font-size 一般来讲font-size是不应该使用rem等相对单位的。因为字体的大小原创 2018-02-27 21:43:23 · 175 阅读 · 0 评论 -
移动web - 终端交互优化
移动web页面上的click事件相应都要慢上300ms1.Tap基础事件 300ms延迟怎么破？使用Tap事件代替click事件 自定义 Tap事件原理： 在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove,即可认为触发了手原创 2018-02-27 22:04:06 · 239 阅读 · 0 评论 -
zepto移动端web相册
参考慕课网原创 2019-05-06 12:05:40 · 351 阅读 · 0 评论