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%（例如横屏时，基于实际可视宽度调整）。	横向卡片布局、响应式宽度容器。

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

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

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

 

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

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

1. 支持情况：

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

2. 兼容性写法：

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

1. 推荐场景：

   • 移动端底部导航栏（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 是移动端布局的重要工具，通过动态适配可视区域解决了传统单位的布局缺陷。在现代开发中，建议优先使用动态单位，并搭配传统单位作为兼容方案，以确保不同设备上的用户体验一致性。