单位

一、基础单位（传统）

• vw：视口宽度的 1%（Viewport Width）
• vh：视口高度的 1%（Viewport Height）
• vi：内联方向（水平）1%（Inline）
• vb：块级方向（垂直）1%（Block）

二、三类变体前缀（现代，适配移动端）

• sv-（Small，小视口）：浏览器UI（地址栏/工具栏）显示时的安全区域
• lv-（Large，大视口）：浏览器UI 隐藏时的最大区域
• dv-（Dynamic，动态视口）：实时跟随UI显示/隐藏变化

三、完整对照表（你列出的全部）

1. 宽度类（Width）

• vw：基础宽度
• svw：小视口宽度（UI显示）
• lvw：大视口宽度（UI隐藏）
• dvw：动态视口宽度（实时变化）

2. 高度类（Height）

• vh：基础高度
• svh：小视口高度（UI显示，安全）
• lvh：大视口高度（UI隐藏，全屏）
• dvh：动态视口高度（移动端首选）

3. 内联类（Inline，水平）

• vi：基础内联
• svi：小视口内联
• lvi：大视口内联
• dvi：动态视口内联

4. 块级类（Block，垂直）

• vb：基础块级
• svb：小视口块级
• lvb：大视口块级
• dvb：动态视口块级

四、场景速记

• 桌面：直接用 vw / vh
• 移动端安全：用 svh / svw（内容不被遮挡）
• 移动端全屏：用 lvh / lvw（沉浸式）
• 移动端自适应：用 dvh / dvw（地址栏自动隐藏时）