一、vw是什么
vw就是视口的宽度，vw 是个相对单位。
不管在什么屏幕下，我们的屏幕宽都是 100vw
二、如何根据vw布局
假设设计稿宽度是
750px
那么有等式1：
750px = 100vw
那么有等式2：
1px = 100vw/750
假设我们想实现
1rem = 100px，根据等式二，得出
1rem = 100px = 100*(100vw/750) = 13.33333vw
最后给
html的根元素设置字体大小值就为13.33333vw`
注意
- 这里的
1rem = 100px，好处是：- 只需要根据设计稿给的
px直接缩小100倍，改单位为rem即可
三、详细代码
- 设置根元素的字体大小为
13.33333vw- 当我们的设备屏幕
大于750的时候：
要设置body居中且最大宽度为750px
还要设置html的的字体大小不能大于100px（宽度不能超过设计稿最大宽度）
html {
font-size: 13.33333vw;
}
body {
max-width: 750px;
margin: 0 auto;
}
/* 当设备宽度大于750的时候，根元素字体大小最大为100px */
@media screen and (min-width: 750px) {
html {
font-size: 100px;
}
}
四、如何使用（px到rem的转换）
如果设计稿给我们一个盒子宽是 350px 高是 400px
那么我们只要在数值的基础上缩小 100倍即可
宽是 3.5rem高是 4rem
