vw / vh

441 阅读1分钟

1、vw / vh

⚫ 相对单位

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

⚫ vw:viewport width

➢ 1vw = 1/100视口宽度

⚫ vh:viewport height

➢ 1vh = 1/100视口高度

2、vw单位尺寸

确定设计稿对应的vw尺寸 (1/100视口宽度)

➢ 查看设计稿宽度

确定参考设备宽度 (视口宽度)

确定vw尺寸 (1/100 视口宽度)

  1. 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,注意光标要放在分号里面才可转换。