十分简单的web移动端rem适配

rem 做移动端适配已经得到广大 web 开发都的喜爱。其实，简单的做 rem 非常容易。只需要三处引入即可。

html 处引入

meta 处做适配声明：

<!-- 名字：视口；内容：宽 = 设备宽，初始缩放比例 =1.0，用户缩放 = 不，最大缩放比例 =1.0--!>
<meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"
/>
<!-- x5( 也就是在微信上）满屏，其他浏览器也满屏 --!> 
<meta name="x5-fullscreen" content="true" />
<meta name="full-screen" content="yes" />

script 引入

在这里我作为除以 10 的处理，当然也可改为你觉得方便计算的值。

<script>
  document.getElementsByTagName('html')[0].style.fontSize = 
      (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';
</script>
<!-- 其中，document.documentElement.clientWidth 返回的是 html 元素 -->

编辑器引入一个 px 转换 rem 的插件

我用的是 vscode，在插件入搜素 px2rem，安装第一个就可以了。

因为插件默认的 html 字体大小（root font size）设为 16px, 由于我用的设计稿都是 iphone6 的尺寸，所以在这里改为 37.5

• 注意：这里是以你引入的 script 所作的系数来转换的。

别忘了重启一下编辑器。
然后就可以在 css 文件上编辑了，推荐把备注也带上，在浏览器上可以看到的。