在CSS中，四种高度视口单位的区别

在CSS中，视口单位是构建响应式网页设计的重要工具，特别是针对移动端开发。除了传统的vh，CSS新引入了svh、lvh和dvh等更精确的单位，解决传统单位在移动端的局限性。

#四种高度视口单位的区别

#适用场景

• svh：关键UI元素，如固定导航栏、底部操作按钮

  复制.header { height: 10svh; } /* 确保导航栏始终可见 */

• lvh：沉浸式内容，如全屏视频、游戏界面

  复制.video-player { height: 100lvh; } /* 最大化利用屏幕空间 */

• dvh：大多数需要动态适应视口的场景（推荐首选）

  复制.hero-section { height: 100dvh; } /* 平滑响应视口变化 */

#浏览器兼容性

这些新单位在现代浏览器中得到良好支持（Chrome 89+、Safari 15+、Firefox 110+），但为兼容旧浏览器，建议使用以下回退方案：

复制.container {
  height: 100vh; /* 传统单位回退 */
  height: 100dvh; /* 现代浏览器优先使用 */
}

/* 或使用特性检测 */
@supports (height: 100dvh) {
  .container {
    height: 100dvh;
  }
}

#总结建议

• 首选dvh：大多数场景下提供最佳用户体验
• 关键元素用svh：确保重要内容不被浏览器UI遮挡
• 沉浸式用lvh：全屏内容需要最大化利用空间
• 性能考虑：dvh因动态计算可能有性能开销，避免在动画中大量使用

这些新单位解决了移动端"视口跳动"问题，让开发者能更精准地控制页面在各种设备上的显示效果。