CSS 动态视口单位 dvh 和 dvw

一、核心概念与设计背景

dvh（Dynamic Viewport Height）和 dvw（Dynamic Viewport Width）是 CSS 中用于优化移动端布局的动态视口单位 ，旨在解决传统视口单位（vh/vw）的痛点：

传统单位的问题 ：当移动端虚拟键盘弹出或屏幕方向切换时，vh/vw 基于固定视口尺寸计算，会导致元素位置 / 尺寸错乱（例如底部导航栏上移、宽度变形）。
动态单位的优势 ：dvh/dvw 会根据当前实际可视区域动态调整尺寸，确保布局稳定。

二、`dvh` 与 `dvw` 的具体定义

单位	全称	计算方式	典型场景
`dvh`	动态视口高度	1dvh = 当前可视高度的 1%（例如键盘弹出时，基于剩余高度重新计算）。	底部导航栏、全屏容器自适应。
`dvw`	动态视口宽度	1dvw = 当前可视宽度的 1%（例如横屏时，基于实际可视宽度调整）。	横向卡片布局、响应式宽度容器。

三、与传统单位的对比（以移动端为例）

css 复制代码

/* 传统单位示例（键盘弹出时布局可能错乱） */
.vh-element {
  height: 50vh; /* 固定视口高度的50%，键盘弹出时高度可能被压缩 */
}

/* 动态单位示例（自动适应可视区域） */
.dvh-element {
  height: 50dvh; /* 始终基于当前可视高度的50%，键盘弹出时保持比例 */
}

核心差异 ：vh/vw 依赖浏览器视口的原始尺寸，而 dvh/dvw 实时响应可视区域的变化（如系统 UI、键盘等因素）。

四、浏览器兼容性与使用建议

支持情况：
- 主流浏览器（Chrome 89+、Safari 15+）已支持，但部分旧版本需加前缀（如 -webkit-dvh）。
- 兼容性查询：Can I Use dvh/dvw。

兼容性写法：

css 复制代码

.container {
  /* 先声明传统单位作为 fallback */
  width: 100vw;
  height: 100vh;
  /* 再声明动态单位（现代浏览器优先） */
  width: 100dvw;
  height: 100dvh;
}

推荐场景：
- 移动端底部导航栏（position: fixed; bottom: 0; height: 50dvh）。
- 横竖屏自适应的卡片（width: 90dvw）。
- 避免键盘遮挡的表单容器（height: 80dvh）。

五、扩展：其他视口相关单位

单位	含义	特点
`lvw/lvh`	逻辑视口宽度 / 高度（Logical Viewport）	基于设备物理像素密度计算，适配高分屏。
`svw/svh`	视觉视口宽度 / 高度（Visual Viewport）	与 `dvw/dvh` 类似，但更早期的实验性单位。
`vhmin/vhmax`	视口高度的最小值 / 最大值	取 `vh` 和 `dvh` 中的较小 / 较大值，增强兼容性。

六、总结

dvh 和 dvw 是移动端布局的重要工具，通过动态适配可视区域解决了传统单位的布局缺陷。在现代开发中，建议优先使用动态单位，并搭配传统单位作为兼容方案，以确保不同设备上的用户体验一致性。