大型、小型和动态视口单元

新增了可适应移动设备视口并带有动态工具栏的 CSS 单元。

Bramus

视口及其单位

若要设置为与视口一样高，您可以使用 vw 和 vh 单位。

  • vw = 视口尺寸宽度的 1%。
  • vh = 视口大小高度的 1%。

将元素的宽度设置为 100vw，高度设置为 100vh，它就会完全覆盖视口。

设为 100vw x 100vh 的浅蓝色元素，覆盖整个视口。视口本身使用蓝色虚线边框表示。
设置为 100vw x 100vh 的浅蓝色元素，覆盖整个视口。
视口本身使用蓝色虚线边框表示。

vw 和 vh 广告单元随这些额外的广告单元一起到达浏览器

  • vi = 视口内嵌轴大小的 1%。
  • vb = 视口块轴大小的 1%。
  • vmin = vw 或 vh 中的较小者。
  • vmax = vw 或 vh 中的较大者。

这些单元对浏览器有良好的支持。

浏览器支持

  • 20
  • 12
  • 19
  • 6

需要新视口单元

虽然现有的广告单元在桌面设备上运行良好，但在移动设备上则要是另一回事。在该视图中，视口大小受是否存在动态工具栏的影响。地址栏和标签页栏等界面。

虽然视口尺寸可能会发生变化，但 vw 和 vh 尺寸不会发生变化。因此，高度为 100vh 的元素将从视口中溢出。

移动设备上的 100vh 在应用加载时过高。
移动设备上的 100vh 加载时太高。

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

当用户代理界面收回时，移动设备上的 100vh 是“正确”的。
当用户代理界面收回时，移动设备上的 100vh 是“正确”的。

为解决此问题，在 CSS 工作组指定了视口的各种状态。

  • 大视口：假设所有 UA 界面会动态展开和收起而处于收起状态的视口。
  • 小型视口：假设所有 UA 界面会动态展开和收起来展开的 UA 界面的尺寸。
大尺寸和小视口的可视化。
大尺寸和小视口的可视化图表。

系统也为新视口分配了单位：

  • 表示大视口的单位带有 lv 前缀。单位包括 lvw、lvh、lvi、lvb、lvmin 和 lvmax。
  • 表示小视口的单位带有 sv 前缀。单位包括 svw、svh、svi、svb、svmin 和 svmax。

除非视口本身调整大小，否则这些视口百分比单元的尺寸是固定的（因此是稳定的）。

两个移动浏览器可视化图表并排放置。其中一个元素大小为 100svh，另一个元素大小为 100lvh。
两个移动浏览器可视化图表并排放置。
其中一个元素大小为 100svh，另一个元素大小为 100lvh。

除了大和小视口之外，还有一个动态视口，用于动态考虑 UA 界面：

  • 当动态工具栏展开时，动态视口与小视口的大小相等。
  • 当动态工具栏收起时，动态视口与大视口的大小相等。

附带的单元带有 dv 前缀：dvw、dvh、dvi、dvb、dvmin 和 dvmax。它们的尺寸介于对应的 lv* 和 sv* 对应项之间。

100dvh 会自行调整为大或小视口大小。
100dvh 会自行调整以适应视口的大或小。

这些广告单元随附在 Chrome 108 中，且已加入已支持的 Safari 和 Firefox 浏览器。

浏览器支持

  • 108
  • 108
  • 101
  • 15.4

注意事项

关于视口单元，请注意以下几点：

  • 所有视口单元都不会考虑滚动条的大小。在启用了传统滚动条的系统上，尺寸为 100vw 的元素会略过宽。这符合规范。

  • 动态视口的值不会以 60fps 的速度更新。在所有浏览器中，更新都会随着 UA 界面展开或收起而受限。一些浏览器甚至会完全根据所用的手势（缓慢滚动与滑动）进行去抖动更新。

  • 屏幕键盘（也称为虚拟键盘）不属于 UA 界面的一部分。因此，这不会影响视口单元的大小。在 Chrome 中，您可以选择启用虚拟键盘确实会影响视口单元的行为。

其他资源

如需详细了解视口和这些单位，请参阅这一集的 HTTP 203。在这张幻灯片中，Bramus 向 Jake 提供了各种视口，并解释了这些单元的具体尺寸是如何确定的。

其他阅读资料：