H5开发-使用vw-rem解决移动端自适应

原理：

vw 即(view-port width)视口宽度，1vw 表示视口宽度的 1%，100vw 则表示整个视口的宽度。
rem 即(font size of the root element)根标签的字体大小，例如设置 html{ font-size : 15px ; } 那么我们在写样式时 1rem 就等于 15px。

通常 UI 给我们的 H5 设计图都是宽度 750px：

我们用 100vw / 750px 等于 0.133333vw/px，意思是将 100vw 分成 750 份，每一份（即 1px）就等于 0.133333vw；再100，就能得到 100px = 13.3333vw。（这里为什么要100？为了让单位大一些，后面写样式的时候不用写那么多小数点。）
我们再将根元素的 font-size 设置为 13.3333vw，这时候就出现了一个完美的等式：1rem = 13.3333vw = 100px。注意头尾 1rem = 100px;使用的时候我们只需要将设计图中的以 px 为单位的数值除以 100 写入样式，单位使用 rem 就可以了。
解释：代码中的 1rem 等于设备视口 13.3333%等于设计图上的 100 像素。
操作：

1. 设置 rem

html {
  font-size: 13.3333vw;
}

2. 样式中使用

/* 这里假设设计图中的宽度是100px 高150px */
div {
  width: 1rem;
  height: 1.5rem;
}
/* 这里假设设计图中的宽度是20px 字体大小32px */
h6 {
  width: 0.2rem;
  font-size: 0.32rem;
}

3. 推荐一个相关的插件，输入 px 单位数值，会提醒转换后的 rem，这样就不用一直计算了。

• px to rem & rpx & vw (cssrem)