Web移动端适配的一些思考

最近，看了之前写的移动端商城项目，看到了当时写的rem适配的代码，觉得有问题，查了些资料，输出一些我的思考。

这是当时的代码：

html {
  font-size: 100px;
}
body {
  font-size: 0.12rem;
}

rem是指相对于根元素的字体大小的单位。比如上面的代码我们设置html的字体大小为 100px;那1rem=100px；12px=0.12rem；那实际上我们的html字体大小并不会随着设备的视口宽度自动变化，因为它永远是 100px;那如何动态进行设置了。找了网上很多资料，觉得vw+rem方案是最简单的：

html {
  font-size: 26.6666666667vw;
}
body {
  font-size: 0.12rem;
}

这个 26.6666666667 是怎么来的，1vw是代表当前浏览器视口宽度window.innerWidth的 1%，注意这里要以设计稿的大小进行计算，比如我这个项目的设计稿的宽度为 375px(对应 100vw),那 1px就是 100/375vw,100px就是（100/375）*100vw（26.6666666667vw）;那我们切换成其他设备的时候，font-size就会动态变化