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

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

视口及其单位

若要设置为与视口一样高,您可以使用 vwvh 单位。

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

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

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

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

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

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

浏览器支持

  • 20
  • 12
  • 19
  • 6

需要新视口单元

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

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

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

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

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

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

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

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

  • 表示大视口的单位带有 lv 前缀。单位包括 lvwlvhlvilvblvminlvmax
  • 表示小视口的单位带有 sv 前缀。单位包括 svwsvhsvisvbsvminsvmax

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

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

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

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

附带的单元带有 dv 前缀:dvwdvhdvidvbdvmindvmax。它们的尺寸介于对应的 lv*sv* 对应项之间。

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

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

浏览器支持

  • 108
  • 108
  • 101
  • 15.4

注意事项

关于视口单元,请注意以下几点:

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

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

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

其他资源

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

其他阅读资料: