移动设备分辨率

常见适配的解决方案，
在微信小程序中引入了rpx这个单位，
在Android用的是dp，在ccs中用的rem，
在苹果中用的pt这个单位，苹果是以iPhone6 *

px、em、rem关系：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。
相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，
需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px,
 这样12px=1.2em, 10px=1em, 
也就是说只需要将你的原来的px数值除以10，
然后换上em作为单位就行了。

rem是CSS3新增的一个相对单位（root em，根em）
这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，
但相对的只是HTML根元素。
通过它既可以做到只修改根元素就成比例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。

简单来说将所有单位都以rem来表示，然后控制根元素的字体大小就行。

那么这基准字体大小设置多少合适呢

因为一般设计稿都是以多少px作为标准，那么最好基准就是px整十倍，以便换算，比如10px，那么0.1rem就是1px。

不直接使用html{font-size:10px;}
据说因为浏览器字体（PC）最小就是12px，
所有应该设置为：
html{font-size:62.5%;}
（原理：浏览器默认字体大小(16px)那么16px*62.5%=10px）

通过js动态调整基准字体大小（关键参数是设计稿的基准大小，初始字体大小）

/* 自执行函数 */
(function(){  
    change();  
    function change(){     
         /*设置以屏幕320px位基准此时的字体大小为100px,
        那么浏览器窗口大小改变的时候新的html的fontSize就是clientWidth/320*100 */
         document.documentElement.style.fontSize = document.documentElement.clientWidth/320*100 + 'px';  
    }    
 /* 窗口大小发生改变时 */
  window.addEventListener('resize',change,false);})()