VW / vh

vw / vh 是什么

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

  vw是：viewport width 视口宽度单位

  vh是：viewport height 视口高度单位

• 相对视口的尺寸计算结果

1vw= 1/100视口宽度

1vh= 1/100视口高度

例如

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

注意：

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

vh / vw怎么用

• 超级简单，元素单位直接使用新单位vw / vh即可

• 因为vw / vh 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

如何还原设计稿？

先设计稿按照iphone678 设计，有个盒子50*50px 如何使用vw呢？

分析：

①设计稿参照iphone 678所以视口宽度尺寸是375像素（像素大厨切换值2x模式）

②那么1vw 是多少像素？ 375px/ 100 = 3.75px

③元素的目标是多少像素？ 50px* 50px

④那么50*50 是多少个vw ？ 50/ 3.75 =13.3333vw

注意事项：

• 因为设计到大量除法，还是适应less搭配更好点

• 我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以在开发中使用vw就基本够用了，vh很少使用

• 兼容性：网站Can I use... Support tables for HTML5, CSS3, etc

哔哩哔哩移动端首页案例

需求：实现在不同宽度设备中等比例缩放的网页效果

分析：

①：准备好项目目录以及文件

②：准备好文字体文件（下载别人网站字体）

检查元素->iconfont样式表->负值字体RUL到浏览器地址栏->回车

③：准备好less文件

生成css文件自动放到css文件下面

因为less生成css文件是在less文件夹内 而不是在css中 所以 添加"out": "./css/" 在往index.html引入

④：准备开始项目内容

 

bilibili官网页面布局

1. 头部模块 -suspension-box 悬挂箱子

安装插件px2vw 打开扩展设置 将视口大小改为375px

引入字体图标的样式和index.css

 

样式在index.less里面写