自适应手机端rem布局

经常我们遇到这样的需求，只需要写几个页面。如果还用前端UI库保证在不同手机尺寸上适配显示，会显得过于复杂，所以我们需要一个根据设计稿尺寸直接编写H5页面的方法。

我参考网易的做法：

网易页面里除了font-size之外的其它css尺寸都使用了rem作为单位，首先获取设计稿的横向分辨率，如750px;为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 7.5rem。

1. head标签中添加：
   <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">


2. 根据设计稿的横向分辨率除以100得到body元素的宽度：750/100=7.5rem

3. 根据设计图中的尺寸除以100得到css中的尺寸，如一个div在设计图中一个width：150px,实际编写时 应该这样写width:1.5rem.

4. 在页面dom加载完毕后添加如下代码设置html的font-size：

   document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

5. 页面中的字体大小font-size不能使用rem,需要进行媒体查询。