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，可以构建出在各种设备和屏幕尺寸下都能完美呈现的网页，提升用户体验。 尤其对于移动应用开发者来说，掌握这些单位至关重要。
