CSS 视口单位 dvh/svh/lvh
CSS新视口单位：dvh/lvh/svh（动态/大/小视口高度）、dvw/lvw/svw、解决移动端100vh溢出问题（地址栏影响）、与vh/vw的对比 · 难度：入门 · +10XP
CSS 视口单位全家桶 —— vh/vw 升级到 dvh/dvw
在手机浏览器中，地址栏的显示和隐藏会导致100vh对应的实际高度不断变化。传统的vh单位在移动端有严重缺陷。新的动态视口单位解决了这个问题。
三种视口单位对比
| 单位 | 相对于 | 地址栏场景 |
|---|---|---|
| vh/vw | 视口（含地址栏） | 不随地址栏变化，可能被遮挡 |
| svh/svw | 小视口（地址栏显示时） | 地址栏占用时的高度 |
| lvh/lvw | 大视口（地址栏隐藏时） | 地址栏隐藏后的最大高度 |
| dvh/dvw | 动态视口 | 地址栏变化时自动调整（推荐） |
推荐用法
/* 全屏Hero区域 —— 用dvh适配移动地址栏 */
.hero {
height: 100dvh;
}动手练习
- 基础练习：在手机或Chrome DevTools移动模式中，分别测试100vh和100dvh的差异。
- 进阶应用：用dvh做一个始终填满可用屏幕空间的全屏Hero区域。
- 项目实战：把网站中所有全屏区域改用dvh，确保移动端地址栏变化时不遮挡内容。