在本教程中，我们将讨论使用经典的 100vh 单位创建全屏部分时面临的挑战，并讨论一些出色的替代 CSS 单位。

英雄或全屏部分是 UI 设计的重要组成部分。它们存在于不同类型的网站中，从登陆页面到作品集网站，旨在在首次吸引访客的注意力。英雄部分的常见组成部分包括幻灯片、图片、视频、标题、文本、行动链接等。

100vh

近年来，创建全屏部分的最简单方法是将其高度设置为 100vh，假设其宽度等于视口宽度。

当前对 vh 的支持

在桌面浏览器上，一切都按预期工作。

然而，在移动浏览器上，默认情况下全屏部分并不完全可见。只有在滚动时，当用户代理的浮动地址栏缩小时，我们才能看到它们全部。请注意，地址栏的位置可能会出现在顶部或底部。

如果我们的部分包含垂直居中的内容或位于其底部位置的行动链接等内容，并且因此最初对访问者部分可见，这可能会导致糟糕的用户体验。

为了演示该行为，我创建了一个包含带有背景图片和垂直居中内容的全屏部分的 GitHub 页面。

请继续使用您的移动设备访问该页面。您会注意到英雄图片默认情况下并不完全可见。

还有一个 指向第二个页面的链接，其中包含一个粘性标题。

幸运的是，现代 CSS 提供了一些 新的视口相关单位，这些单位在写作时具有很好的浏览器支持（超过 90%）。它们在桌面浏览器上的行为与 100vh 相同，因为没有任何动态 UA 接口。但是它们在移动设备上的行为有所不同。

100dvh

这些单位中的第一个是动态视口高度单位（dvh）。

以下是它在 W3C 工作草案 文档中的定义：

动态视口百分比单位（dv*）是相对于动态视口大小定义的：根据动态考虑任何 UA 接口的视口大小，这些接口可以动态展开和收缩。这允许作者调整内容的大小，以使其可以完全适合视口，无论是否存在这样的接口。

理解其行为最简单的方法是重新访问我们的页面，并点击 dvh 按钮将 100dvh 应用于英雄部分。

当前对 dvh 的支持

您会注意到，默认情况下，英雄部分将完全显示。然后，当您滚动时，地址栏折叠，它会更新部分的高度，并且表现得像 100vh 一样。

尽管如此，由于这个单位始终试图匹配视口高度，而不管工具栏是否存在，这会导致滚动时出现瞬间跳跃/闪烁，从而导致我们的居中内容重新定位—这在大多数情况下并不是 100vh 的理想替代品，并且可能会对用户和/或性能产生影响。

100lvh

接下来，我们有大视口高度单位（lvh）。

以下是它在 W3C 工作草案 文档中的定义：

大视口百分比单位（lv*）和默认视口百分比单位（v*）是相对于大视口大小定义的：假设任何 UA 接口被动态展开和收缩时的视口大小。这允许作者调整内容的大小，以确保填充视口，注意到当这些接口展开时，这样的内容可能被隐藏。

同样，理解其行为最简单的方法是重新访问我们的页面，并点击 lvh 按钮将 100lvh 应用于英雄部分。

当前对 lvh 的支持

您会注意到我们的部分行为与将其高度设置为 100vh 时完全相同。也就是说，默认情

况下，英雄部分不会完全显示，但当地址栏收缩时会完全显示。

换句话说，这个单位总是返回在工具栏最小时滚动时出现的最大可见视口高度—在写作时，这当然不是 100vh 的理想替代品，因为它并没有提供任何新功能。

100svh

最后，我们有小视口高度单位（svh）。

以下是它在 W3C 工作草案 文档中的定义：

小视口百分比单位（sv*）是相对于小视口大小定义的：假设任何 UA 接口被动态展开和收缩时的视口大小。这允许作者调整内容的大小，以确保即使存在这样的接口，内容也可以适合视口，注意到当这样的接口被展开时，这样的内容可能不会填充视口。

请再次查看我们的页面，并点击 svh 按钮将 100svh 应用于英雄部分，以查看其行为。

当前对 svh 的支持

您会注意到我们的部分将始终可见，并且行为与 100dvh 的初始状态（滚动之前）相同。

换句话说，在写作时，这个单位将始终返回最小的可见视口高度，当工具栏展开时出现—这当然使其成为 100vh 的理想替代品。

回退

如果您对前述任何单位感到满意，并希望使用它，但同时需要回退到 100vh 单位以确保更安全，请尝试类似于这样的老式 CSS：

.hero {
  height: 100svh;
  height: 100vh;
}

这样，不受支持的浏览器将忽略第一个属性值。

结论

在本教程中，我们讨论了在使用不同的视口相关单位时在所有设备上制作真正的全屏部分所面临的挑战。

让我们回顾一下在移动浏览器上的行为：

• 将 100vh 或 100lvh 设置为一个部分将产生相同的结果。该部分将具有固定高度（除非我们调整视口大小），但除非我们滚动并且地址栏被收缩，否则我们将无法完全看到它。
• 将 100dvh 设置为一个部分意味着它不会有固定的高度，但会随着我们滚动而重新计算。因此，该部分内部的元素可能会重新定位。在某些场景下，它的行为可能有用，但可能会令用户感到烦恼。
• 将 100svh 设置为一个部分意味着它将始终具有固定的高度（除非我们调整视口大小），该高度将等于初始视口高度（在我们滚动之前）—当地址栏展开时。该部分将默认完全可见，就像 100dvh 的初始状态一样。

我的建议是，此时此刻，使用 100svh 创建全屏英雄部分，并回退到 100vh。