一、vw是什么

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下， 我们把屏幕分为平均的 100等份。

1vw = 1 / 100 屏幕的宽度

二、如何根据vw布局

• vw表示1%的屏幕宽度，而我们的设计稿通常是750px的，屏幕一共是100ww，对应750px，那么1px就是0.133333px,
• 为了方便计算，我们放大100倍，同时我们知道另一个单位rem,rem是相对于html根元素，为了方便计算，我们取html是100px
  通过上面的计算结果1px是0.1333333w . 那么100px就是13.333333了，这样车后面的用rem就好计算了，这样得到13.333333ww对应100ppx (750的设计）
• 然后我们就可以很愉快的写rem单位了，由于倍率是100，我们也不需要啥计算插件之类的了，除以100，直接小数点向左移动2位

看下面的关系图

image.png

设备宽度已知（100vw）
设计稿宽度已知（假设750px）
根元素最大值（假设100px）
未知 x = (100/750)*100 = 13.333333vw

二、详细代码

• 经过上面的计算我们需要设置根元素的字体大小为13.3333vw
• 当我们的设备屏幕大于750的时候，要设置body居中且最大宽度为750px
• 当我们的设备屏幕大于750的时候，还要设置html的的字体大小不能大于100px（宽度不能超过设计稿最大宽度）

html {
  font-size: 13.333333vw;
}
body {
  max-width: 750px;
  margin: 0 auto;
}
/* 当设备宽度大于750的时候，根元素字体大小最大为100px */
@media screen and (min-width: 750px) {
  html {
    font-size: 100px;
  }
}

三、使用

简单理解就是vw出现代替了我们利用js动态计算屏宽复杂步骤
rem的计算依旧直接缩小100倍

如果设计稿给我们一个盒子宽是 350px 高是 400px
那么我们只要在数值的基础上缩小 100倍即可
宽是 3.5rem高是 4rem