Pixel移动开发像素知识
px：css pixels逻辑像素，浏览器使用的抽象单位
dp,pt:device independent pixels设备无关像素（物理像素，固定大小）
dpr:devicePixelRatio设备像素缩放比
计算公式：1px = dpr ² * dp;
DPI：打印机每英寸可以喷的墨汁点(印刷行业)
PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度
目前，在计算机显示设备参数描述上，二者意思表达是一样的.
计算公式：以iPhone5为例子
ppi=√(1136²+640²)/4 = 326ppi(视网膜Retina屏)
注意：单位为硬件像素，非px.
PPI越高，像素数越高，图像越清晰
但可视度越低(小)，系统默认设置缩放比越大
解释：640*1136 换算为320*568 是因为 1个逻辑像素由四个物理像素组成，2*2的结构，所以，并不是直接除4，1136/2=568, 640/2=320
ViewPort
手机浏览器默认为我们做了两件事情
一：页面渲染在一个980px(ios)的viewport
（为了排版正确，伪造一个虚拟的viewport.）
二:缩放
但是不建议使用默认的980px的viewport（了解即可）：①宽度不可控制，不同系统不同设备的默认值都可能不同；②页面缩小版显示，交互不友好；③链接不可点；④有缩放，缩放后又有滚动.
Viewport Meta标签
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=no" >
·width:设置布局viewport的特定值("device-width")——时刻让viewport宽度等于设备宽度
·initial-scale:设置页面的初始缩放——[initial-scale=1]时刻让度量viewport等于布局viewport
·minimum-scale：最少缩放
·maximum-scale：最大缩放
user-scalable:用户能否缩放
默认的布局viewport可以用document.body.clientWidth去查；度量viewport可以用window.innerWidth去查
设计移动Web
方案一：根据设备的实际宽度来设计（常用）
方案二：1px=1dp 缩放0.5.根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片都不需要额外处理。
Flexbox弹性盒子布局
移动Web特别样式处理
1.在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp。
width:(w_value/dpr)px;
height:(h_value/dpr)px;
2.一像素边框
不使用rem的情况：font-size.
一般来讲font-size是不应该使用rem等相对单位的。因为字体的大小是趋向于阅读的实用性，并不适合于排版布局。
同理趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致（跟rem的目的相反）
4.多行文本溢出
Tap基础事件
Touch事件
触摸才是移动设备的交互的核心事件
touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会触发）
touchmove：手指在屏幕滑动，连续触发
touchend：手指离开屏幕时触发
除常见的事件属性外，触摸事件包含专有的触摸属性
touches:跟踪触摸操作的touch对象数组
targetTouches：特定时间目标的touch对象数组
changeTouches:上次触摸改变的touch对象数组
弹性滚动
当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。
移动web页面也是拥有这样的能力的，但滚动有几种情况需要考虑：
body层滚动：(系统特殊化处理)
自带弹性滚动，overflow：hidden失效，GIF和定时器暂停
局部滚动:
没有弹性滚动，没有滚动惯性，不流畅
上拉加载
使用scroll事件，而不是touch事件(android有bug)
网友评论