本文介绍 CSS 视口的新引入的长度单位，专为适配移动设备的动态工具栏而设计。

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

新的 CSS 单元，用于处理带有动态工具栏的移动视口。

庆典

视口及其单位#

要调整与视口一样高的尺寸，您可以使用vw和vh单位。

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

给一个元素一个宽度100vw和一个高度100vh，它将完全覆盖视口。

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

和单位登陆带有这些附加单位的浏览vw器vh

• vi= 视口内联轴大小的 1%。
• vb= 视口块轴大小的 1%。
• vminvw=或 中的较小者vh。
• vmaxvw=或 中的较大者vh。

这些单位有很好的浏览器支持。

需要新的视口单位#

虽然现有的单元在桌面上运行良好，但在移动设备上却是另一回事。在那里，视口大小受动态工具栏存在与否的影响。这些是用户界面，例如地址栏和标签栏。

尽管视口大小可以更改，但vw和vh大小不会。因此，尺寸过100vh大的元素会从视口中渗出。

移动设备上的 100vh 负载过高。

向下滚动时，这些动态工具栏将缩回。在这种状态下，尺寸为100vh高的元素将覆盖整个视口。

当 User-Agent 用户界面缩回时，移动设备上的 100vh 是“正确的”。

为了解决这个问题，CSS 工作组规定了视口的各种状态。

• 大视口：视口大小假设任何动态扩展和缩回的 UA 接口被缩回。
• 小视口：视口大小假设任何动态扩展和缩回的 UA 接口都可以扩展。

大视口和小视口的可视化。

新视口也分配了单位：

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

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

彼此相邻的两个移动浏览器可视化效果。
一个元件尺寸为 100svh，另一个元件尺寸为 100lvh。

除了大视口和小视口之外，还有一个动态视口，它动态考虑了 UA UI：

• 当动态工具栏展开时，动态视口等于小视口的大小。
• 当动态工具栏被缩回时，动态视口等于大视口的大小。

它的伴随单位有dv前缀：dvw, dvh, dvi, dvb, dvmin, 和dvmax。它们的尺寸夹在它们lv*和sv*对应物之间。

100dvh 自适应为大或小视口尺寸。

这些单元在 Chrome 108 中发布，加入了已经支持的 Safari 和 Firefox。

注意事项#

关于视口单位，有几点需要注意：

• 没有一个视口单元考虑滚动条的大小。在启用了经典滚动条的系统上，元素大小100vw因此会有点太宽。这是按照规格。
• 动态视口的值不会以 60fps 更新。在所有浏览器中，随着 UA UI 展开或缩回，更新会受到限制。一些浏览器甚至完全根据使用的手势（慢速滚动与滑动）来消除更新。
• 屏幕键盘（也称为虚拟键盘）不被视为 UA UI 的一部分。因此它不会影响视口单位的大小。在 Chrome 中，您可以选择加入虚拟键盘的存在会影响视口单位的行为。

其他资源#

要了解有关视口和这些单位的更多信息，请查看HTTP 203 的这一集。在其中，Bramus向Jake讲述了各种视口的所有信息，并解释了这些单位的大小是如何确定的。

补充阅读材料：