CSS中的 `dvh` 与 `vh`: 深入理解视口单位
在现代 Web 开发中，视口单位（如vh,vw,vmin,vmax）被广泛用于响应式设计。然而，随着移动设备的发展，尤其是那些带有虚拟键盘的设备，传统的vh单位有时并不能提供理想的用户体验。本文将深入探讨vh和dvh（Dynamic Viewport Height），帮助你更好地选择适合你的项目的单位。
1. 视口单位简介
1.1vh- Viewport Height
vh是视口高度单位，表示相对于视口高度的百分比。例如，100vh表示整个视口的高度。
.full-height{height:100vh;/* 元素高度等于视口高度 */}1.2vw- Viewport Width
类似地，vw是视口宽度单位，表示相对于视口宽度的百分比。
.full-width{width:100vw;/* 元素宽度等于视口宽度 */}1.3vmin和vmax
vmin：取视口宽高较小值的百分比。vmax：取视口宽高较大值的百分比。
2.vh的局限性
尽管vh在桌面浏览器上表现良好，但在移动设备上，尤其是当虚拟键盘弹出时，它可能会导致一些问题。
2.1 虚拟键盘的影响
在移动设备上，当用户点击输入框时，虚拟键盘会弹出，这会导致视口高度的变化。如果使用vh来设置元素高度，可能会出现以下情况：
- 当键盘弹出时，页面内容可能被部分遮挡。
- 页面布局可能会变得混乱，用户体验下降。
示例：
<divclass="footer">Footer content</div>.footer{position:fixed;bottom:0;height:10vh;/* 固定高度为视口高度的10% */background-color:lightblue;}在这种情况下，当虚拟键盘弹出时，10vh可能不再代表原来的10%，而是更小的值，导致底部的footer高度变小甚至消失。
3.dvh- Dynamic Viewport Height
为了应对上述问题，CSS 引入了dvh（Dynamic Viewport Height）。dvh是一种新的单位，旨在解决视口高度变化的问题。
3.1dvh的工作原理
dvh动态调整其值以适应当前可用的视口高度。当虚拟键盘弹出时，dvh会自动调整，确保页面内容不会被遮挡。
示例：
.footer{position:fixed;bottom:0;height:10dvh;/* 使用 dvh 替代 vh */background-color:lightblue;}在这个例子中，当虚拟键盘弹出时，10dvh仍然保持相对稳定的值，避免了页面布局的混乱。
4. 如何选择vh还是dvh
4.1 使用场景
vh：适用于不需要考虑虚拟键盘影响的场景，比如桌面端应用或简单的移动端页面。dvh：适用于需要处理虚拟键盘弹出的复杂移动端页面，尤其是表单较多的页面。
4.2 浏览器支持
截至 2023 年底，dvh已经得到了大部分现代浏览器的支持，但为了兼容性，建议在实际项目中进行测试，并提供回退方案。
/* 提供回退方案 */.footer{height:10vh;/* 默认使用 vh */height:10dvh;/* 如果支持 dvh 则使用 dvh */}5. 结论
vh和dvh都是非常有用的 CSS 单位，但在不同的场景下有不同的表现。了解它们的区别并根据具体需求选择合适的单位，可以帮助我们创建更加流畅和友好的用户体验。
希望这篇博客对你有所帮助！如果你有任何疑问或建议，请随时留言交流。
扩展阅读
- MDN 文档 - Viewport units
- Can I Use - dvh