CSS 动态视口单位 dvh 和 dvw

一、核心概念与设计背景

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

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

二、dvhdvw 的具体定义

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

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

css 复制代码
/* 传统单位示例(键盘弹出时布局可能错乱) */
.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. 兼容性写法

    css 复制代码
    .container {
      /* 先声明传统单位作为 fallback */
      width: 100vw;
      height: 100vh;
      /* 再声明动态单位(现代浏览器优先) */
      width: 100dvw;
      height: 100dvh;
    }
  3. 推荐场景

    • 移动端底部导航栏(position: fixed; bottom: 0; height: 50dvh)。
    • 横竖屏自适应的卡片(width: 90dvw)。
    • 避免键盘遮挡的表单容器(height: 80dvh)。

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

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

六、总结

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

相关推荐
伍哥的传说38 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783839 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为