Web移动端适配的一些思考

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

这是当时的代码：

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

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

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

这个26.6666666667是怎么来的，1vw是代表当前设备宽度的1%，注意这里要以设计稿的大小进行计算，比如我这个项目的设计稿的宽度为375px(对应100vw),那1px就是100/375vw,100px就是（100/375）*100vw（26.6666666667vw）;那我们切换成其他宽度设备的时候，font-size就会动态变化，真正实现了自适应布局。

x当然，此处给出的并不是最好的方案，很多地方还是建议全部使用vw进行布局。后面会继续研究移动端适配的问题，有了更好的解决方案在进行总结输出。