h5c3-移动端-补充内容-完结撒花—✿✿ヽ(°▽°)ノ✿✿—8.31

vw和vh

移动端布局

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

vw和vh是什么

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

• vw：viewport width 视口宽度单位
• vh：viewport height 视口高度单位（本质是根据视口宽度来等比例缩放页面元素高度和宽度，所以开发中使用vw就基本够用了。vh很少使用）

相对视口的尺寸计算结果

• 1vw=1/100 视口宽度
• 1vh=1/100 视口高度

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

vw和vh怎么用

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

查询兼容性：网站：https://caniuse.com/

px单位转换vw单位vscode插件：px2vw

---

---

---

跳过（469 -- 498）节课——黑马面面项目——以后有空回来接着看！！