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