CSS *vh（dvh、lvh、svh）和 *vw 单位

背景

这个背景部分很长；如果您想跳过前面的内容，这里有一个指向新单元部分的便捷链接。

不过，我认为了解我们是如何走到这一步的还是很有帮助的。此外，这些信息在后面讨论dvh和dvw单位时也很有用。

注意：虽然我主要关注的是该vh单元，但请注意，该vw单元也存在同样的问题。只是讨论其中一个问题更容易一些。

历史vh

该vh单位最初定义为

等于初始包含块高度的 1%。

这确实非常实用，也非常实用……直到移动浏览器开始利用一些技巧来最大化手机的屏幕空间。要了解这些技巧，只需在手机上打开任意网页，滚动浏览一下，注意的不是网页内容，而是浏览器的用户界面本身。

你可能注意到，浏览器的 UI会随着滚动而改变大小。如果浏览器的 UI 和视口大小也发生了变化，那么问题vh就变成了：

如果vh是初始包含块（ICB）的 1%，但随着用户滚动，ICB 会改变大小，那么vh 实际上等于什么？

第一个解决方案，第一个问题

这个问题的第一个也是最简单的答案是“vh随着 ICB 的变化而变化”。从逻辑上讲，这似乎也应该是最终答案。

但是，这个解决方案存在一个问题：

假设你的手机100px屏幕空间为。当你加载一个页面时，浏览器UI会占据屏幕空间，15px从而留下85px剩余的空间用于显示网站内容。

但是，你的浏览器非常酷，所以当你向下滚动时，浏览器 UI 只占用10px，而你的网站内容只剩下90px。或者，以表格形式：

<section style="height: 100vh">在你的 Fancy Website™ 上，页面上有 5 个元素。首次加载页面时，每个元素<section>都85px很高。但当用户开始向下滚动时，浏览器 UI 开始改变大小，这会导致这些部分元素增加 5 个像素，总共增加到90px！

现在，假设用户现在位于页面底部，正在查看第 5 个部分元素。他们决定向上滚动，这会导致浏览器 UI 变为最大尺寸。这会导致vh缩小，所有部分现在都5px变小了；当您位于页面底部时，总共20px相差了 （5px每个部分有 4 个部分）。

只需向上滚动一点点，页面内容就会向上跳动，占据整个屏幕空间的 1/5（总共 100px / 缩小 20px）！这是一种非常不愉快的体验，说实话，这很糟糕。

想象一下，如果您使用了vh诸如 之类的东西font-size，那会是什么样子！

第二个解决方案，第二个问题

考虑到这个问题， 2015 年 Safari / Webkit 工程师决定改变单位的行为vh：

动态更新高度不起作用，我们有几个选择：在 iOS 上删除视口单位，像 iOS 8 之前一样匹配文档大小，使用小视图尺寸，使用大视图尺寸。

根据我们掌握的数据，使用更大的视图尺寸是最好的折衷方案。

换句话说，动态vh单位并不好，所以他们将其更改为静态单位，等于浏览器 UI 最小（且内容/“视图大小”最大）时的视口大小。

大约一年后，Chrome / Blink 工程师同意了，并更新了vh设备以执行同样的操作。

这就是我们现在所处的位置（截至撰写本文时）vh。

“最大视图尺寸”的问题之一vh是，当你首次加载页面时，任何内容height: 100vh都会变得更大或溢出屏幕。仅使用 CSS 很难让内容完全适应页面。

于是，在 2019 年，一个新的 CSS 提案诞生了。2021 年，该提案在收到反馈和改进后，作为几个新单元被纳入 CSS 规范！

新的 CSS 单位

大型、小型、动态和传统vh单元。

大视口单元

&单位定义为lvh：lvw

大视口百分比单位 (lv*) 是根据大视口大小定义的：视口大小假设任何动态扩展和缩回的 UA 界面都会缩回。

换句话说，当浏览器 UI 最小且网站内容最大时的尺寸。lvh本质上就是该vh单元当前（在撰写本文时）的行为方式。

小视口单位

&单位定义为svh：svw

小视口百分比单位 (sv*) 是根据小视口大小定义的：视口大小假设任何 UA 界面都可以动态扩展和缩回以进行扩展。

本质上，svh当浏览器 UI 最大且网站内容最小时，为您提供可用于填充屏幕的单位。

动态视口单位

&单位定义为（重点是我加的）dvh：dvw

动态视口百分比单位 (dv*) 是根据动态视口大小定义的：视口大小会动态考虑任何动态扩展和收缩的 UA 界面。这允许开发者调整内容大小，使其无论是否存在此类界面都能精确地适应视口。

即使视口本身保持不变，动态视口百分比单位的大小也不稳定。使用这些单位可能会导致内容大小调整，例如在用户滚动页面时。根据使用情况，这可能会对用户造成干扰和/或降低性能。

虽然dvh&dvw单位在纸面上听起来不错，但上述定义中指出的警告（以及上面第一个问题和解决方案部分）实际上让我相信你只应该在非常罕见和特定的情况下使用它们。

传统视口单位

有了这些新单位，vh和又该如何vw定位呢？有趣的是，它们目前的定义如下：

UA 默认视口百分比单位 (v*) 是根据 UA 定义的 UA 默认视口大小定义的，对于任何给定文档，该大小应等同于大视口大小、小视口大小或某个中间大小。

我个人认为这个定义太模糊了，我担心这会对用户和开发者产生什么影响。我想我们拭目以待吧！