em rem解析 rem适配 及1px适配

显示器像素

1.物理像素（设备像素）–显示器上最小的物理单元，由主机控制，显示不同的色值和亮度。
2.设备独立像素（css像素）–每个css像素属于虚拟像素，由系统转换控制不定数量的物理像素响应。
3.设备像素比（dpr）–物理像素 / 设备独立像素

像素关系

Iphone6为例：

图中所示，一个小方块为1个物理像素，左图设备像素比（dpr）为1，也就是1px等于1个小方块，右图设备像素比（dpr）为2，也就是1px等于2个小方块。
css的2px，在左图中占据4个格子，在右图中占据16个格子，左右总面积相等，所以右图中显示的更加清楚。

em

em是css2时推出的相对单位，相对于父级元素的字体大小比值，浏览器默认font-size:16px，这时1em等于16px。

当前元素设置font-size时，当前元素其他css属性使用到em时，都是相对于当前元素的font-size进行比值，
比如父级元素font-size：24px；当前元素font-size：16px；那么当前元素设置的margin：1em；相当于margin：16px；并不等于24px。

em总是相对于父级元素字体大小比值，这就导致每一层级的font-size若不是1em，就会影响子集元素的em比值。
比如父级元素font-size：16px；当前元素的设置font-size：1.2em；就等于19.2px；子元素设置font-size：1.2rem就等于23.04px。

rem

rem是css3推出的相对单位，相对于根元素（html根标签）字体大小适配，浏览器默认font-size:16px；这时1rem等于16px。
rem做适配主要是通过改变html标签的font-size，从而达到控制全部以rem为单位的元素大小。

rem适配

以下为rem适配代码

//designWidth为设计图宽度，为设备独立像素值（css像素）
(function (designWidth) {
   
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
   
    	//获取html元素宽度，也就是浏览器宽度，也就是css像素
        var width = docEl.getBoundingClientRect().width