移动web: 移动适配 vm&vh

相对单位

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

• vw：viewport width

  • 1vw = 1/100视口宽度

• vh：viewport height

  • 1vh = 1/100视口高度

• vw单位尺寸

  • 1. 确定设计稿对应的vw尺寸 （1/100视口宽度）

    查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

  • 2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

• vh单位尺寸

  • 1. 确定设计稿对应的vh尺寸 （1/100视口高度）

    查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）

  • 2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

VScode安装px-to-vw插件

vscode使用px-to-vw插件可以快速将px转换为vw/vw转换为px

• vscode扩展搜索px-to-vw

• 配置插件： 设置 → 搜索 px-to-vw → 在此处配置设计稿的宽度，如果是二倍图则要除以2

• 快捷键: shift + alt + z
• 快捷键原来是跟 px --> rem 冲突的,通过设置修改
• px --> rem 的快捷键为alt + z

rem 和 vw / vh 的区别