前端朔源：像素

设备需要适配多屏幕进行开发，第一个问题初始化像素。像素分为两种：

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.