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

相关推荐
CCF_NOI.1 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9495 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_5 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路7 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔8 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang8 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔8 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任8 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas