阿里云 发布网站 教程seo研究中心教程

1.基本概念

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

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

相对视口的尺寸计算结果

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

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

2.使用vw

1. 开发设计中使用vw，需要使用像素大厨将模式改为2X
2. 使用vw，还原设计稿需要做
   • 确定设计稿视口宽度。如375
   • 直接使用测量数值/（视口宽度/100）
   • 比如50/(375/100)

3.vw注意事项

• 涉及大量less除法，还是适应less搭配更好点
• 本质是根据视口宽度来等比例缩放页面高度和宽度的，所以开发中使用vw基本就够用了，vh很少使用
• 兼容性：网站：https://caniuse.com/
  

实战:bilibili官网首页（移动端）

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

1. 准备好项目目录以及文件

2. 准备好字体文件（下载别人网站字体）
   检查元素 --》iconfont样式表 --》复制字体url到浏览器地址栏 --》回车

3. 准备好less文件
   生成的css文件自动放到css文件夹下面

   "less.compile":{//设置导出css路径"out": "../css"
   }
   

   

4. 准备项目内容

安装插件px2vw:将px单位转换为vw单位，下面修改默认设置

改成375是因为bilibili的默认设计稿是375

后面内容使用less+flex布局+vw即可