1、vw / vh
⚫ 相对单位
⚫ 相对视口的尺寸计算结果
⚫ vw:viewport width
➢ 1vw = 1/100视口宽度
⚫ vh:viewport height
➢ 1vh = 1/100视口高度
2、vw单位尺寸
确定设计稿对应的vw尺寸 (1/100视口宽度)
➢ 查看设计稿宽度
→
确定参考设备宽度 (视口宽度)
→
确定vw尺寸 (1/100 视口宽度)
- vw单位的尺寸
=
px单位数值 / ( 1/100 视口宽度 )
3、安装px-to-vw使用vscode插件快速将px转换为vw/vw转换为px ⚫ vscode扩展搜索px-to-vw 配置插件: 设置→搜索 px-to-vw在此处配置设计稿的宽度,如果是二倍图则要除以2 光标定在要转换的px数值上,按alt+Z即可实现px>vw / vw> px,注意光标要放在分号里面才可转换。