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

CSS视口单位是构建响应式网页设计的基石，它们根据浏览器视口（可见区域）的尺寸动态调整元素大小，让网站在各种屏幕尺寸下都能保持最佳显示效果。本文将深入探讨常用的vh、vw以及更高级的dvh、lvh、svh单位，并讲解如何利用它们创建更灵活、更强大的响应式布局。

1. 理解CSS视口单位

视口单位是相对单位，其值取决于浏览器视口的宽度或高度。最常用的有：

• vh (viewport height): 视口高度的1%。 例如，height: 50vh; 将元素高度设置为视口高度的一半。
• vw (viewport width): 视口宽度的1%。例如，width: 25vw; 将元素宽度设置为视口宽度的四分之一。

2. vh 和 vw 的局限性

尽管vh和vw简单易用，但在处理动态变化的视口时存在一些局限性：

• 浏览器UI元素: 地址栏、工具栏等浏览器UI元素会占用视口空间，导致vh和vw计算结果与预期不符。
• 设备方向变化: 旋转设备会改变视口尺寸，造成布局的瞬间变化。

3. 更高级的视口单位：dvh、lvh、svh

为了克服vh和vw的不足，CSS引入了dvh、lvh和svh：

• dvh (dynamic viewport height): 动态视口高度，考虑了浏览器UI元素的影响，始终反映可见视口的高度。
• lvh (layout viewport height): 布局视口高度，忽略浏览器UI元素，表示视口最大可能的高度。
• svh (small viewport height): 最小视口高度，适用于键盘等UI元素可能占据大量空间的场景。

4. vw 的应用

vw单位不受浏览器UI元素或设备方向变化的影响，始终表示视口宽度的1%。它常用于创建水平方向的响应式布局，例如：

div {
  width: 100vw; /* 占据整个视口宽度 */
  background-color: lightpink;
}

5. 实际应用案例

• 响应式英雄区:

.hero {
  height: 100dvh; /* 适应可见视口高度 */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

• 全屏模态框:

.modal {
  height: 100svh; /* 适应最小视口高度，即使键盘弹出也能正常显示 */
  width: 100vw;
  overflow-y: auto; /* 允许滚动 */
  background-color: white;
}

• 固定底部栏:

footer {
  height: 10lvh; /* 保持一致的高度，不受浏览器UI元素影响 */
  width: 100vw;
  background-color: darkgray;
}

6. 灵活组合视口单位

为了实现更精细的控制，可以组合使用不同的视口单位：

.container {
  min-height: 100svh; /* 保证在最小视口下也能正常显示 */
  height: 100dvh; /* 填充可见视口高度 */
  max-height: 100lvh; /* 防止超出最大视口高度 */
}

7. 浏览器兼容性

vh和vw得到广泛支持，但dvh、lvh和svh相对较新，需注意浏览器兼容性，并为旧浏览器提供备用方案。

8. 结论

CSS视口单位是创建响应式和自适应网页设计的关键。 理解并灵活运用vh、vw、dvh、lvh和svh，可以构建出在各种设备和屏幕尺寸下都能完美呈现的网页，提升用户体验。 尤其对于移动应用开发者来说，掌握这些单位至关重要。

以上就是CSS 视口单位：CSS *vh（dvh、lvh、svh）和 *vw 单位的详细内容，更多请关注知识资源分享宝库其它相关文章！