利用CSS实现rem适配

原文地址：https://www.toutiao.com/i6773562707711885832
方案一：使用meta标签
在html的head中插入下面的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">

没错，是两个viewport标签。width=device-width写在上面，width=375写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。

方案二：使用css的calc计算属性

在css中定义html的font-size为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：

html {
  font-size: calc(100vw/3.75);
  -webkit-text-size-adjust: 100%;
}

然后在css中，就可以将所有的px单位除以100，得到rem单位了。比如：

.row>div {
  float: left;
  width: .82rem;
  height: .82rem;
  text-align: center;
  line-height: .82rem;
  margin-left: .05rem;
  background-color: #f0f0f0;
}

上面的rem单位转换，建议大家可以使用px2rem这个插件完成，webpack、vscode都能支持。设置时将rootFontSize 设为100即可。

在vscode中，可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。

当然，rem和px可以相互共存，比如我标题栏就想要44px高，这样就不会缩放了。

总结：两种方案如何选择
方案一，直接使用html的mata实现整个页面的缩放，比较适合那些宣传单页或全屏游戏交互类，无法实现px与rem共存的情况。

方案二(推荐)，利用了rem来缩放，可实现与px共存，在借助px2rem的情况下，能高效方便的实现适配。