现代 CSS 中的视口高度和宽度单位

当我不断遇到仅使用传统视口单位 vh 和 vw 的 CSS 代码库和主题定义时，我考虑写一篇关于我们现在可以使用的强大工具的博客文章，这可以让我们的生活更轻松，让我们的 CSS 代码变得更好。

好的旧视口单元

长话短说，多年来我们一直使用 vh 和 vw 将某些内容定义为初始视口高度和宽度的百分比。例如，如果我们想用绿色填充所有设备的整个视口，我们可以执行以下操作：

.big-fat-green-element {
  background: green;
  height: 100vh;
  width: 100vw;
}

..这可能会成功。但这只能可靠地工作，除非出于某种原因，某些东西影响了可见视口。例如，一旦用户开始滚动页面，大多数现代移动浏览器都会隐藏部分或全部标题和地址栏，这也会影响视口并使我们的大而胖的绿色元素变得不那么大。

现代视口单位

如今，在最新的 CSS 规范中，我们可以安全地使用所谓的大、小和动态视口单元。

大视口单位

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

本质上，lvh 和 lvw 为我们提供了单位，我们可以将其用作当浏览器 UI 最小且网站内容处于最大状态时相对于视口的百分比。 lvh 和 lvw 实际上会给我们提供与传统 vh 和 vw 单位相同的行为。

示例：使用 lvh 和 lvw 单位的示例是定义应充当整页背景的元素的高度和宽度。

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}

小视口单位

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

换句话说，svh 和 svw 为我们提供了可以用来当浏览器 UI 处于最大状态且网站内容处于最小状态时填充屏幕的单位。

示例：使用 svh 单位的一个很好的例子是定义固定底部栏或静态标题的高度。

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

动态视口单位

动态视口百分比单位 (dv*) 是根据动态视口大小定义的：动态考虑动态扩展和缩回的任何 UA 界面来调整视口大小。

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

虽然 dvh 和 dvw 单位听起来很理想，但上面定义中指出的注意事项以及我在滚动元素中使用它们时遇到的一些问题，使我得出结论，我们应该只在非常特定的情况下使用它们。

示例 1：使用 dvh 的一个示例是定义应根据视口变化进行调整的内容元素的高度。

/* Main content adjusts dynamically. 
 * Since we used dvh the element height will align with the actual viewport and adapt to its changes */
.adjustable-content {
  background-color: #895;
  height: calc(100dvh - 10svh); /* Adjust height considering header */
  overflow: auto;
  padding: 10px;
}

示例 2：上周我遇到了这种情况，当时报告了一个关于表单的错误，该错误根据设计，滚动被禁用，而表单将占据视口的整个高度和宽度。当移动用户将注意力集中在输入上并且设备键盘会显示时，就会出现该错误。那么表单布局就会被破坏。修复方法是使用 dvh 而不是 vh 来定义其高度。

Codepen 与示例

最后这是一个代码笔，您可以在其中看到现代视口单元的运行情况。享受吧！

以上是现代 CSS 中的视口高度和宽度单位的详细内容。更多信息请关注PHP中文网其他相关文章！