告别 vh 的困扰，拥抱更灵活的视口单位：dvh、svh、lvh

前端

2022-11-20 17:30:57

CSS视口单位：超越vh的局限

作为前端开发人员，我们的日常任务之一便是应对不同设备和屏幕尺寸带来的兼容性挑战。为解决这一问题，CSS引入了视口单位（Viewport Units），让我们能够定义元素的尺寸和位置，使其随着设备视口大小的改变而自适应。

其中，vh（视口高度）是最为常用的视口单位，表示元素高度相对于视口高度的百分比。然而，vh在某些情况下存在着局限性，可能会导致意想不到的后果。

vh的局限性

vh的主要局限在于它总是相对于当前视口的高度进行计算。这意味着，当视口的宽度发生变化（例如，当设备从纵向切换到横向时），元素的高度也会随之变化，即使视口的高度保持不变。

例如，假设我们使用vh定义一个全屏元素的高度。当设备从纵向切换到横向时，视口宽度变大，视口高度保持不变。这时，元素的高度会根据新的视口宽度重新计算，导致元素的高度缩小。这可能会破坏布局并导致视觉上的问题。

动态视口单位：dvh、svh和lvh

为了解决vh的局限性，CSS3引入了三个新的动态视口单位：dvh、svh和lvh。这些单位与vh类似，但它们在计算时考虑的是视口的不同维度。

dvh（动态视口高度） ：dvh相对于设备视口的高度进行计算。无论视口宽度如何变化，dvh的值始终保持不变。这意味着，使用dvh定义的元素的高度将始终与视口的高度成比例，无论设备的方向如何。
svh（动态视口宽度） ：svh相对于设备视口的宽度进行计算。无论视口高度如何变化，svh的值始终保持不变。因此，使用svh定义的元素的宽度将始终与视口的宽度成比例，无论设备的方向如何。
lvh（逻辑视口高度） ：lvh相对于设备视口的高度进行计算，但它考虑到设备的缩放比例。这意味着，当用户在设备上进行缩放时，使用lvh定义的元素的高度会相应调整，以保持与视口的高度成比例。

dvh、svh和lvh的应用

dvh、svh和lvh为我们提供了更多的灵活性来创建响应式布局。我们可以根据需要选择最合适的单位，以确保元素在不同设备和屏幕尺寸上都能正确显示。

以下是几个使用dvh、svh和lvh的示例：

使用dvh来定义全屏元素的高度。这样可以确保元素的高度始终与视口的高度成比例，无论设备的方向如何。
使用svh来定义侧边栏的宽度。这样可以确保侧边栏的宽度始终与视口宽度成比例，无论设备的方向如何。
使用lvh来定义正文文本的大小。这样可以确保文本的大小与视口的高度成比例，当用户在设备上进行缩放时，文本的大小也会相应调整。

代码示例

/* 使用dvh定义一个全屏元素 */
.fullscreen {
  height: 100dvh;
}

/* 使用svh定义一个侧边栏 */
.sidebar {
  width: 25svh;
}

/* 使用lvh定义正文文本大小 */
body {
  font-size: 1em; /* 默认字体大小为1em */
  font-size: calc(1em + 0.5lvh); /* 缩放时字体大小会相应增加 */
}