02/26
2019
使用 rem 布局时，最关键的地方在于动态计算 rem 的值。比如设计稿 640px，我们预设 rem 为 100px。rem 是设计宽度的 15.625%（100 / 640 = 0.15625）。当设备宽度为 320px 的时候，rem 值应该按比例变成 50px。
以前当设备宽度变化时，我们要根据这个比例重新计算 rem 应该是多少，增加了额外的工作量。如果我们可以直接告诉浏览器，我的 rem 就是这个比例（页面宽度的 15.625%），你聪明一点自己算吧！这样不就省事了吗？没错，这就是 vw 单位。
vw 是视图宽度，1vw 相当于 1% 视图宽度（想象把页面宽度分成了 100 份）。所以上面的比例 15.625%，用 vw 就是 15.625vw。当页面宽度变大或者变小，rem 总是页面宽度的 15.625%。
html{
font-size: 15.625vw; // 要理解 vw 是个百分比单位
}
// 下面照常使用 rem 做单位
我们这么写就可以了，浏览器会自动计算出来 rem 的值，非常的方便。
如果你的设计稿和预设 rem 不是 640px、100px，那么只需要依据你的比例，修改 vw 值即可。
实际使用中可以这样：
@media screen and (max-width: 750px) {
html { // 此处使用 scss 计算，如果是原生 css 请直接写出 vw 值
font-size: (100 / 750) * 100vw; // 当宽度不大于设计宽度时，生成 vw 值
}
}
@media screen and (min-width: 751px) {
html {
font-size: 100px; // 当宽度大于设计宽度时，限制最大值
}
}
body {
max-width: 750px;
min-width: 320px;
margin: 0 auto;
}
这里面的 750 根据自己设计稿的宽度修改。
