设备需要适配多屏幕进行开发，第一个问题初始化像素。像素分为两种：
1. 当前显示设备的物理像素分辨率 单位 pt
2. CSS像素分辨率 单位 px
3. 设备独立像素：随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。
pt 同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过 window.devicePixelRatio 可以获得该比例值
window.devicePixelRatio
此值也可以解释为像素大小的比率，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
dpr（像素设备比）：dpr = window.devicePixelRatio = 物理像素 / 逻辑像素 = ppi /160
逻辑像素 = 物理像素 * dpr。
做CANVAS 需要定义这个关键参数
获取屏幕的物理像素尺寸：
宽：window.screen.width;
高：window.screen.height;
在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位：
/* 获取viewport的大小 */
宽：document.documentElement.clientWidth;
高：document.documentElement.clientHeight;
<meta name="viewport" content="width=device-width, initital-scale=1.0, user-scalable=no">
width ：设置 layout viewport 宽度，其取值可为数值或者device-width。
height：设置layout viewport 高度，其取值可为数值或者device-height
initital-scale：设置页面的初始缩放值，为一个数字，可以带小数。
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数。
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数。
user-scalable：是否允许用户进行缩放，值为"no"（不能缩放）或"yes"（可以缩放）。
屏幕适配
关于 em 和 rem 只影响字体
em 是相对长度单位（参照父元素），其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。
例如：.box {font-size: 16px;} 则 1em = 16px
.box {font-size: 32px;}则 1em = 32px，0.5em = 16px
rem 相对长度单位（参照 html 元素），其参照根元素(html)字号大小。
例如 ：html {font-size: 16px;} 则 1rem = 16px
html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px.
