前端vh和vw

vw/vh是什么？
vw/vh 是一个相对单位（类似 em 和 rem 相对单位）
vw 是：viewport width 视口宽度单位
vh 是：viewport height 视口高度单位
相对视口的尺寸计算结果
1vw = 1/100 视口宽度
1vh = 1/100 视口高度
例如：

当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。

注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和 vh 总是针对于当前视口来说的。

vw/vh怎么用？
超级简单，元素单位直接使用新单位 vw/vh 即可
因为 vw/vh 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

1.vh

vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。

2.vw

vw就是当前屏幕宽度的1%，补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

如何还原设计稿？

前提：我们设计稿按照 iPhone 6/7/8 来设计，有个盒子是 50px * 50px 的，如何使用 vw 呢？

分析：设计稿参照 iPhone 6/7/8，所以视口宽度尺寸是 375px（像素大厨切换到 2x 模式，因为 UI 设计图是 750px 的）

那么 1vw 是多少像素？

375px / 100 = 3.75px

我们元素的目标是多少像素？

50px * 50px

那么 50 * 50 是多少个 vw？

50 / 3.75 = 13.3333vw