vw vh移动端布局

1.移动端布局

移动端布局—flex布局
为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放
需要移动端适配有如下方案：

2.vw/vh是什么

1.vw/vh是一个相对单位（类似em和rem相对单位）

vw是：viewport width 视口宽度单位
vh是： viewport height 视口高度单位

2.相对视口的尺寸计算结果

1vw = 1/100视口宽度
1vh = 1/100视口高度
例如：
当前屏幕视口是 375像素，则 1vw 就是 3.75 像素， 如果当前屏幕视口为414，则 1vw 就是 4.14 像素

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

3.vw/vh怎么用

如何还原设计稿？
前提： 我们设计稿按照iPhone678 来设计，有个盒子是 50像素50像素的，如何使用vw呢？
分析：
①：设计稿参照iPhone678，所以视口宽度尺寸是 375像素（像素大厨切换到2x模式）
②：那么1vw是多少像素？
375px / 100 = 3.75px
③：我们元素的目标是多少像素？
50px * 50px
④：那么5050 是多少个vw？
50 / 3.75 = 13.3333vw