新增了可适应移动设备视口并带有动态工具栏的 CSS 单元。
视口及其单位
若要设置为与视口一样高,您可以使用 vw
和 vh
单位。
vw
= 视口尺寸宽度的 1%。vh
= 视口大小高度的 1%。
将元素的宽度设置为 100vw
,高度设置为 100vh
,它就会完全覆盖视口。

视口本身使用蓝色虚线边框表示。
vw
和 vh
广告单元随这些额外的广告单元一起到达浏览器
vi
= 视口内嵌轴大小的 1%。vb
= 视口块轴大小的 1%。vmin
=vw
或vh
中的较小者。vmax
=vw
或vh
中的较大者。
这些单元对浏览器有良好的支持。
浏览器支持
- 20
- 12
- 19
- 6
需要新视口单元
虽然现有的广告单元在桌面设备上运行良好,但在移动设备上则要是另一回事。在该视图中,视口大小受是否存在动态工具栏的影响。地址栏和标签页栏等界面。
虽然视口尺寸可能会发生变化,但 vw
和 vh
尺寸不会发生变化。因此,高度为 100vh
的元素将从视口中溢出。

向下滚动时,这些动态工具栏会收起。在这种状态下,高度设为 100vh
的元素将覆盖整个视口。

为解决此问题,在 CSS 工作组指定了视口的各种状态。
- 大视口:假设所有 UA 界面会动态展开和收起而处于收起状态的视口。
- 小型视口:假设所有 UA 界面会动态展开和收起来展开的 UA 界面的尺寸。

系统也为新视口分配了单位:
- 表示大视口的单位带有
lv
前缀。单位包括lvw
、lvh
、lvi
、lvb
、lvmin
和lvmax
。 - 表示小视口的单位带有
sv
前缀。单位包括svw
、svh
、svi
、svb
、svmin
和svmax
。
除非视口本身调整大小,否则这些视口百分比单元的尺寸是固定的(因此是稳定的)。

其中一个元素大小为 100svh,另一个元素大小为 100lvh。
除了大和小视口之外,还有一个动态视口,用于动态考虑 UA 界面:
- 当动态工具栏展开时,动态视口与小视口的大小相等。
- 当动态工具栏收起时,动态视口与大视口的大小相等。
附带的单元带有 dv
前缀:dvw
、dvh
、dvi
、dvb
、dvmin
和 dvmax
。它们的尺寸介于对应的 lv*
和 sv*
对应项之间。

这些广告单元随附在 Chrome 108 中,且已加入已支持的 Safari 和 Firefox 浏览器。
浏览器支持
- 108
- 108
- 101
- 15.4
注意事项
关于视口单元,请注意以下几点:
所有视口单元都不会考虑滚动条的大小。在启用了传统滚动条的系统上,尺寸为
100vw
的元素会略过宽。这符合规范。动态视口的值不会以 60fps 的速度更新。在所有浏览器中,更新都会随着 UA 界面展开或收起而受限。一些浏览器甚至会完全根据所用的手势(缓慢滚动与滑动)进行去抖动更新。
屏幕键盘(也称为虚拟键盘)不属于 UA 界面的一部分。因此,这不会影响视口单元的大小。在 Chrome 中,您可以选择启用虚拟键盘确实会影响视口单元的行为。
其他资源
如需详细了解视口和这些单位,请参阅这一集的 HTTP 203。在这张幻灯片中,Bramus 向 Jake 提供了各种视口,并解释了这些单元的具体尺寸是如何确定的。
其他阅读资料: