CSS新单位dvh、lvmin、vi、cqb等初解

这篇文章发布于 2026年07月17日，星期五，17:01，归类于 CSS相关。 阅读 42 次, 今日 41 次 没有评论

 

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12289
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、CSS又出新单位了

一不留神，CSS又多了几十个我不认识的单位。

来来来，排排站，给大家露个脸。

dvb, dvh, dvi, dvmax, dvmin, dvw，
svb, svh, svi, svmax, svmin, svw，
lvb, lvh, lvi, lvmax, lvmin, lvw，
vi, vb
cqw, cqh, cqi, cqb, cqmin, cqmax

赶快花时间学习一番。

从dvh说起

dvh这个单位应该是最为常用的，全称 Dynamic Viewport Height，即动态视区高度。

我们平时用的比较多的是vh这个单位，表示视区高度。

但是在iOS Safari浏览器下，页面浏览的时候，如果你滚动，会发现菜单啊，导航啊这些会被滚走，此时，视区的高度变化了。比方说下面录屏视频底部的地址栏，滚动的时候高度会变小。

如果还是使用传统的vh单位，布局就会有问题。

此时，就可以使用dvh这个CSS单位，1dvh就是1%的动态视区高度。

比方说，我们构建一个全屏覆盖的黑色半透明遮罩层，则可以使用下面的CSS代码：

.fullscreen {
  height: 100dvh;
  background: #0009;
}

至于对应的宽度单位dvw就没什么应用价值了，因为网页视窗的宽度一般是不存在所谓的动态变化的。

svh和lvh又是什么？

svh是Small Viewport Height的缩写，表示假定浏览器所有工具栏全部展开（可见区域最小）的高度。
lvh则是Large Viewport Height的缩写，是假定浏览器所有工具栏全部收起（可见区域最大）的高度。

个中区别参见下表：

单位 全称 行为模式 最佳适用场景

svh
 		Small Viewport Height 假定浏览器所有工具栏全部展开（可见区域最小）的高度。 固定的底部常驻菜单，确保绝对不会被遮挡。

lvh
 		Large Viewport Height 假定浏览器所有工具栏全部收起（可见区域最大）的高度。 大气的背景大图，追求极致的视觉延伸感。

dvh
 		Dynamic Viewport Height 随工具栏的显示或隐藏动态实时变化的高度。 全屏 App 界面、侧边栏菜单、全屏表单。

二、那些以i, b结尾的单位

本文开头出现的几十个单位中，有1/3的单位要么以i结尾，要么以b结尾。

这些单位都是CSS逻辑单位。

  • i是inline的首字母，默认表示水平方向，例如单位vi在绝大多数场景下，其实和vw的表现一样。
  • b是block的首字母，默认表示垂直方向。

其实类似的CSS逻辑属性还挺多，比方说用得比较多的：

margin-inline: 20px;
padding-block: 1rem;

从实用角度来看，这些CSS逻辑单位大家了解下即可，因为平时很少会用到需要改变水平或垂直排版流的场景，没有这样的场景，自然也就没有使用的必要。

所以，类似与vi这样的单位，除了装逼以外，没有任何作用，还是老老实实使用vw吧。

三、cq家族单位

说起cq家族，不知道为何脑中突然出现葬爱家族，哈哈哈。

葬爱家族 精神小妹

cq是container query的简介，中文译为容器查询。

本博已经多次介绍过：

是非常实用的特性。

其中用的最多的单位就是cqw，1cqw就是1%的对应容器的宽度大小，这个在弹性布局中很有用。

至于其他单位，也就好理解了，参加下表：

单位 全称 计算规则 适用场景
cqw Container Query Width 查询容器宽度的 1% 水平排版下，基于容器宽度自适应尺寸、字体
cqh Container Query Height 查询容器高度的 1% 垂直排版、卡片高度驱动布局、竖向自适应组件
cqi Container Query Inline 查询容器内联轴尺寸的 1%，随书写模式自动切换轴向；横排等价 cqw，竖排等价 cqh 多语言横竖排版兼容组件，无需修改样式自动适配流向
cqb Container Query Block 查询容器块轴尺寸的 1%，随书写模式自动切换轴向；横排等价 cqh，竖排等价 cqw 文字块垂直高度自适应、图文流布局，兼容横竖书写
cqmin Container Query Min 取 cqw 与 cqh 中更小值的 1% 正方形卡片、头像、图标，保证元素不会拉伸变形
cqmax Container Query Max 取 cqw 与 cqh 中更大值的 1% 全屏填充容器、横幅大图，铺满容器最长边

四、打完收工，打道回府

噢啦，正文到此结束，最后，附上兼容性截图。

dvh的兼容性

容器查询家族单位的兼容性与d家族单位相比，大差不差，Chrome早一些，Safari慢一些，见：

cqw的兼容性

OK，碎碎念时间。

最近团队发生了一件不大不小的事情，那就是运转了十多年的前端双周分享和每周小测停止了。

还能为啥，没人参与了呗！

那为什么没人参与呢？

最直接的原因就是AI太强了，大家对这种低效又痛苦的学习方式已经没了兴趣。

这种心理很好理解，我哼次哼次辛辛苦苦学了这些技术点，回过头一看，很AI相比，连个脚趾头都比不上，道心直接破碎，还学个毛线！

总而言之，此事对我还颇有触动，想了不少东西。

有兴趣的可以访问这里，看看我的一些思考。

配图1

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12289

（本篇完）

相关文章
«上一篇
分享到：
标签： , , , , , ,


发表评论（目前没有评论）