新增了可适应移动设备视口并带有动态工具栏的 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 提供了各种视口，并解释了这些单元的具体尺寸是如何确定的。
其他阅读资料：
全新可互操作系列课程的一部分