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

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

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

视口及其单位#

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

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

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

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

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

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

需要新的视口单位#

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

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

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

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

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

新视口也分配了单位：

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

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

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

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

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

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

注意事项#

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

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

其他资源#

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

补充阅读材料：

• CSS 值 4 规范：视口相对长度
• ChromeStatus 条目
• 布局视口解释器
• 视口单位解释器