CSS 视口单位：CSS vh（dvh、lvh、svh）和 vw 单位

CSS 视口单位对于创建适应不同屏幕尺寸的响应式布局至关重要。这些单位测量相对于视口高度和宽度的尺寸，使开发人员能够设计灵活且适应性强的 Web 界面。本指南将介绍传统的“vh”和“vw”单位，并介绍“dvh”、“lvh”和“svh”等较新的单位，解释它们如何增强响应能力并更有效地处理视口变化。

1.CSS 中的视口单位是什么？

视口单位是相对单位，可根据浏览器视口的大小动态调整。最常用的是：

vh：视口高度的 1％。

vw：视口宽度的 1％。

这些单位可以轻松设计随浏览器窗口大小缩放的元素。例如：

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

在这个例子中，“div”跨越了视口的一半宽度和整个高度。

2. 传统 vh 和 vw 的局限性

虽然 `vh` 和 `vw` 在大多数情况下都能很好地工作，但它们没有考虑到视口中的某些动态变化，例如：

移动设备上浏览器地址栏或导航控件的外观。

由设备方向或调整浏览器窗口大小引发的改变。

这些限制可能导致设计看起来不一致或导致意外的布局问题，尤其是在移动设备上。

3. 新的视口单位：dvh、lvh 和 svh

为了解决这些问题，CSS 引入了三个新单位：“dvh”（动态视口高度）、“lvh”（大视口高度）和“svh”（小视口高度）。

动态视口高度（dvh）

“dvh” 会根据视口的变化（例如浏览器 UI 元素的出现或消失）进行动态调整。它代表当前视口高度的 1%，确保您的布局实时适应。

例子：

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

这确保了即使浏览器 UI 发生变化，`div` 也始终适合可见区域。

大视口高度（lvh）

`lvh` 代表最大可能视口高度的 1%，忽略动态 UI 变化（如移动地址栏）。

例子：

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

这对于需要保持一致性的布局很有用，无论浏览器 UI 如何变化。

小视口高度 (svh)

`svh` 代表最小可能视口高度的 1%，适用于浏览器 UI 占据屏幕很大一部分的情况。

例子：

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

在处理诸如键盘弹出窗口之类的 UI 元素可以缩小可见区域的设备时，此单元特别有用。

4.视口宽度（vw）

“vw” 测量视口宽度的 1%。它保持一致，不受滚动或 UI 外观等动态变化的影响。

例子：

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

这对于水平布局或全宽设计来说是理想的。

5.实际用例

这些单位在现实场景中的应用方式如下：

响应式英雄部分

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

即使移动地址栏隐藏或出现，这也能确保英雄部分始终适合屏幕。

全页模态框

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

使用“svh”可确保即使屏幕键盘降低了视口高度，模式仍然可用。

粘性页脚

footer {
  height: 10lvh; /* Fixed to the largest viewport height for consistency */
  width: 100vw;
  background-color: darkgray;
}

粘性页脚可在各种设备上保持其大小。

6. 组合单元，实现最大灵活性

您可以混合搭配这些单元，以获得更具适应性的设计。例如：

.container {
  min-height: 100svh; /* Ensures usability on smallest viewport */
  height: 100dvh; /* Fills visible area dynamically */
  max-height: 100lvh; /* Prevents exceeding the largest viewport height */
}

这种方法可确保设计适应所有可能的视口场景。

7.浏览器支持

虽然 `vh` 和 `vw` 已得到各大浏览器的广泛支持，但 `dvh`、`lvh` 和 `svh` 是较新的支持。请确保检查浏览器兼容性并为旧版浏览器提供后备方案。

后备示例：

.container {
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Preferred for modern browsers */
}

8. 结论

CSS 视口单位（例如“vh”、“vw”、“dvh”、“lvh”和“svh”）是创建响应式和适应性强的网页设计的强大工具。虽然“vh”和“vw”可以处理大多数情况，但较新的“dvh”、“lvh”和“svh”单位可以解决局限性，尤其是在移动设备上。通过了解和利用这些单位，**移动应用开发者**可以制作适用于所有设备和场景的无缝、用户友好的设计。

CLIS.CC

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