css dvh

作者：靈魂风尖上发布日期:2025-07-29 浏览:80

/* 使用 dvh 单位的示例代码 */

/* 设置一个 div 的高度为视口高度的 50% */
.container {
  height: 50dvh;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 设置一个子元素的样式 */
.item {
  font-size: 2rem;
  color: white;
}

解释说明：

dvh 是 CSS 中的一个相对单位，表示动态视口高度（Dynamic Viewport Height）。它类似于 vh 单位，但会根据视口的高度变化动态调整。
在这个示例中，.container 的高度被设置为视口高度的 50%，即 50dvh。这意味着当视口高度发生变化时，.container 的高度也会相应地调整。
.item 是一个子元素，设置了字体大小和颜色，用于展示内容。

如果你需要更多的解释或有其他问题，请告诉我！

上一篇：css hsla

下一篇：css 边框圆角