新的 CSS 视口单位

为了解决移动端网页滚动时，动态工具栏自动收缩的问题，CSS 工作组规定了视口的各种状态。

• Large viewport（大视口）：视口大小假设任何动态工具栏都是收缩状态。
• Small Viewport（小视口）：视口大小假设任何动态工具栏都是扩展状态。

新的视口也分配了单位：

• 代表 Large viewport 的单位以 lv 为前缀：lvw、lvh、lvi、lvb、lvmin、lvmax。
• 代表 Small Viewport 的单位以 sv 为前缀：svw、svh、svi、svb、svmin、svmax。

图片

另外还有一个 Dynamic viewport（动态视口）

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

相应的，它的视口单位以 dv 为前缀：dvw, dvh, dvi, dvb, dvmin, dvmax。

图片

目前，各大浏览器均已经对新的视口单位提供了支持：

图片