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;
}

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

大视口高度 (lvh)

lvh 表示最大可能视口高度的 1%，忽略动态 UI 更改（例如移动地址栏）。

示例：

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

这对于需要保持一致性的布局非常有用，无论浏览器 UI 如何更改。

小视口高度 (svh)

svh 代表最小可能视口高度的 1%，适应浏览器 UI 占据屏幕很大一部分的场景。

示例：

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

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

4.视口宽度 (vw)

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

示例：

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

这非常适合水平布局或全角设计。

5.实际用例

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

响应式英雄部分

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

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

全页模态框

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

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

粘性页脚

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

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

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

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

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

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

7.浏览器支持

虽然 vh 和 vw 得到了跨浏览器的广泛支持，但 dvh、lvh 和 svh 是新添加的内容。确保检查浏览器兼容性并为旧版浏览器提供后备方案。

后备示例：

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

8.结论

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

以上是CSS 视口单位：CSS *vh（dvh、lvh、svh）和 *vw 单位的详细内容。更多信息请关注PHP中文网其他相关文章！