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)