Hello! 欢迎来到小浪资源网!



CSS 视口单位:CSS *vh(dvh、lvh、svh)和 *vw 单位


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

相关阅读