vw和vh布局

 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 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

直接使用即可！

如何还原设计稿？

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

分析：

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