2022.3.15 学习笔记
移动端开发之vw和vh：
一、vw和vh
1.移动端布局
①移动端布局--flex布局
②为了适应可以适配移动端，页面元素可以宽度和高度等比例缩放
③需要移动端适配有以下方案：
市场比较常见：rem：①需要不断修改html文字大小 ②需要媒体查询media ③需要flexible.js
未来趋势：vw/vh：省去各种判断和修改
2.vw/vh是什么
- vw/vh是一个相对单位（类似于em和rem相对单位）
vw是viewport width 视口宽度单位
vh是viewport height 视口高度单位
- 相对视口的尺寸计算结果
1vw=1/100 视口宽度 1vh=1/100 视口高度
例如：当前屏幕视口是375像素，则1vw就是3.75px
注：vw/vh和百分比是有区别的，百分比是相对于父元素来说的，vw/vh是相对于当前视口来说的。
3.vw/vh怎么用
- 元素单位直接使用即可
- 还原设计稿
我们设计稿参考iphone8时，美工给的设计稿宽度是750px，但 实际视口宽度是375px（使用测量工具时，注意转换为2x模式）。如若要添加一个50pxX50px的盒子在iphone8中，如何使用vw？
首先，iphone8中1vw=3.75px，那50px=50/3.75vw=13.33vw
4.vw/vh注意事项：
①因为涉及到大量除法，适应less搭配更加方便
②由于本质是根据视口宽度来等比例缩放页面元素的高度和宽度的，所以在开发中vw就基本够用，vh很少使用。
③兼容性：网站：https://caniuse.com/
二、哔哩哔哩案例
