VW: 是时候放弃REM布局了

首先我们先介绍一下rem

em是css中的一个计量单位，就好比猴子是上单的一个计量单位一样 即 em: em-quads。
那么，rem的意思就不难猜了，r代表的是 root 即 rem：root em => root em-quads。
我们都知道，em是个单位它参照的是父元素的字体，那么rem的大小就是以根元素的字体作为参照。
所以，我们在用rem的时候就必须知道根元素是什么，它的字体大小是多少，还有如何设置根元素的字体，已达到我们根据设备尺寸的不同实现用rem作为计量单位完成我们所讲的移动端的适配的。
而关于rem的适配方案各家的方法也不是很统一，只能说是各有千秋，而比较流行的就是手机淘宝的适配方案了，也就是我们总在讲的lib-flexible的适配方案。关于rem的布局方案我推荐一篇文章会详细讲到lib-flexible布局方案《使用Flexible实现手淘H5页面的终端适配》

在使用rem布局中到底会有哪些问题

• 在奇葩的dpr设备上表现效果不太好，比如 一些华为的高端机型 用rem布局会出现错乱。
• 设置根字体大小的方式有两种，一种是媒体查询，优点：不需要额外使用js去更改html的字体，缺点：不连续，或者说并能完全实现对所有设备的布局规范统一；
  另一种是js动态更改html字体，优点：连续；缺点：不如直接写媒体查询的体验好；
• 不支持css3 calc的需要大量密集的 @media hack；
• 使用iframe引用也会出现问题；
• 需要解决在ios上的1px边框问题，但是这个在lib-flexible中已经解决：（1px变2px， 又被 initial-scale=0.5 缩小了一半）；

关于viewport，即，视窗

• vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
• vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
• vmin：vmin的值是当前vw和vh中较小的值
• vmax：vmax的值是当前vw和vh中较大的值
  这里我又要推荐了另外的两篇文章给大家了分别是大漠的《再聊移动端页面的适配》和《如何在Vue项目中使用vw实现移动端适配》还有一篇是Ghan的《使用create-react-app脚手架搭建vw-layout解决方案》

总结

之所以会写这篇文章，就是希望大家在使用上述某一种适配方案的时候，要大概了解其机制，兼容性，以及可能遇到的问题，做到心中有数。
以上。