CSS 中的svh（Small Viewport Height）、lvh（Large Viewport Height）和dvh（Dynamic Viewport Height）是三种新型视口相对单位，旨在解决传统vh单位在移动端因浏览器 UI 动态变化（如地址栏、工具栏的显示/隐藏）导致的布局问题。以下是它们的核心区别、特性及适用场景的详细分析：
一、核心定义与计算逻辑
svh（Small Viewport Height）
- 定义：表示浏览器 UI 完全展开时的最小视口高度（如地址栏、工具栏可见时的视口高度）。
- 计算逻辑：取设备初始视口高度和当前视口高度的最小值。
- 特点：
- 保守性：始终基于最小可用视口高度，确保内容不会被浏览器 UI 遮挡。
- 稳定性：值不随浏览器 UI 状态变化（如键盘弹出、地址栏隐藏）而改变。
- 示例：
.header{height:100svh;}/* 高度始终等于最小视口高度 */
lvh（Large Viewport Height）
- 定义：表示浏览器 UI 完全隐藏时的最大视口高度（如地址栏、工具栏不可见时的视口高度）。
- 计算逻辑：取设备初始视口高度和当前视口高度的最大值。
- 特点：
- 扩展性：始终基于最大可用视口高度，适合需要铺满屏幕的场景。
- 稳定性：值不随浏览器 UI 状态变化而改变（但可能因设备旋转等物理变化调整）。
- 示例：
.fullscreen-section{height:100lvh;}/* 高度始终等于最大视口高度 */
dvh（Dynamic Viewport Height）
- 定义：表示当前动态视口高度，随浏览器 UI 的显示/隐藏实时变化。
- 计算逻辑：根据浏览器 UI 的当前状态（如地址栏是否展开）动态计算视口高度。
- 特点：
- 动态性：值会随浏览器 UI 状态变化（如键盘弹出、地址栏隐藏）而实时调整。
- 灵活性：适合需要自适应视口变化的布局，但可能因频繁变化导致性能开销。
- 示例：
.main-content{height:100dvh;}/* 高度随视口动态变化 */
二、核心区别对比
| 单位 | 全称 | 计算逻辑 | 稳定性 | 适用场景 |
|---|---|---|---|---|
| svh | Small Viewport Height | 初始视口高度与当前高度的最小值 | 高 | 需要确保内容不被浏览器 UI 遮挡（如固定导航栏、底部按钮）。 |
| lvh | Large Viewport Height | 初始视口高度与当前高度的最大值 | 高 | 需要铺满屏幕最大可用区域（如全屏视频、游戏、沉浸式页面）。 |
| dvh | Dynamic Viewport Height | 当前动态视口高度 | 低 | 需要实时响应浏览器 UI 变化（如普通网页主容器、滚动时高度调整的布局）。 |
三、典型应用场景
svh 的适用场景
- 固定导航栏/底部按钮：确保内容始终可见，避免被浏览器 UI 遮挡。
.fixed-header{height:10svh;}/* 导航栏高度固定为最小视口的 10% */.cta-button{height:8svh;}/* 按钮高度固定为最小视口的 8% */ - 边界保护：防止内容因视口变化而溢出或被裁剪。
.safe-container{min-height:100svh;}/* 容器最小高度等于最小视口高度 */
- 固定导航栏/底部按钮：确保内容始终可见，避免被浏览器 UI 遮挡。
lvh 的适用场景
- 全屏展示：如视频播放、游戏、画廊等需要铺满屏幕的场景。
.video-player{height:100lvh;}/* 视频播放器高度等于最大视口高度 */ - 沉浸式体验：如登录页、引导页等需要最大化利用屏幕空间的页面。
.landing-page{height:100lvh;}/* 页面高度等于最大视口高度 */
- 全屏展示：如视频播放、游戏、画廊等需要铺满屏幕的场景。
dvh 的适用场景
- 动态布局：如普通网页主容器，需要随浏览器 UI 变化调整高度。
.main-content{height:calc(100dvh - 80px);}/* 主内容高度动态计算 */ - 滚动交互：如需要随滚动实时调整高度的元素（如吸顶导航、折叠面板）。
.sticky-header{height:10dvh;}/* 吸顶导航高度随视口动态变化 */
- 动态布局：如普通网页主容器，需要随浏览器 UI 变化调整高度。
四、性能与兼容性考虑
性能影响
- dvh因动态计算可能导致频繁重排（Reflow），需谨慎使用（如避免在动画中大量使用）。
- svh/lvh性能更优，因值固定，无需实时计算。
浏览器兼容性
- 主流支持：Chrome 89+、Safari 15+、Firefox 110+ 等现代浏览器已支持。
- 回退方案：可通过
@supports检测单位支持性，并提供传统vh作为回退。.hero-section{height:100vh;/* 传统单位回退 */height:100dvh;/* 新单位优先 */}@supports(height:100dvh){.hero-section{height:100dvh;}}
五、总结与推荐
- 优先使用
dvh：适合大多数动态布局场景，提供最流畅的用户体验。 - 关键内容用
svh：确保内容始终可见，避免被浏览器 UI 遮挡。 - 全屏体验选
lvh：如视频、游戏等需要最大化利用屏幕空间的场景。 - 测试与优化：在使用新单位时，需充分测试不同设备和浏览器下的表现，并优化性能。
