"CSS 动态视口单位：dvh/lvh/svh 的兼容与布局优化"

概述传统 `vh` 在移动端受地址栏/工具栏显示隐藏影响，容易导致高度跳变。新视口单位 `dvh/lvh/svh` 分别代表动态/最大/最小视口高度，帮助在不同状态下稳定布局。用法与差异`dvh`（dynamic viewport height）：随 UI 变化动态更新，适用于需跟随视口变化的区域（如全屏容器）。`lvh`（large viewport height）：取最大高度，适合避免收起时的高度不足。`svh`（small viewport height）：取最小高度，适合在展开状态下防止溢出［参考1,2］。兼容与实践回退策略：同时声明 `min-height: 100vh; min-height: 100dvh;`，在不支持新单位的环境仍可用旧值。与 `env(safe-area-inset-*)` 协作处理全面屏安全区；在横竖屏切换时测试布局。参考与验证［参考1］MDN 中文：视口相关单位与说明（含 dvh/svh/lvh）：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length#viewport-relative_lengths［参考2］web.dev：移动端视口单位与 UI 高度变化的解决方案：https://web.dev/articles/viewport-units关键词校验关键词与新视口单位主题一致。