在当今移动互联网盛行的时代，创建适配手机屏幕的网页布局至关重要。CSS Viewport 单位中的 vh 为我们提供了一种高效的解决方案。

Viewport 即视口，它代表浏览器窗口的可视区域。vh 是 Viewport Height 的缩写，意为视口高度的百分比单位。1vh 就等于视口高度的 1%。这一特性使得我们在设计网页布局时，能够轻松实现与手机屏幕高度的适配。

使用 vh 来设置元素的高度是最为直观的应用。比如，若想让一个 div 元素占据整个手机屏幕的一半高度，只需设置其高度为 50vh。代码如下：

div {
    height: 50vh;
    background-color: lightblue;
}

这样，无论用户使用何种型号的手机浏览网页，该 div 元素都会始终保持屏幕高度一半的显示效果。

在处理网页的导航栏、内容区域和页脚布局时，vh 也能发挥重要作用。假设我们希望导航栏固定占据屏幕高度的 10%，内容区域自适应剩余高度，页脚占据 5%。代码示例如下：

nav {
    height: 10vh;
    background-color: gray;
}
main {
    height: 85vh;
    background-color: white;
}
footer {
    height: 5vh;
    background-color: black;
    color: white;
}

如此一来，网页的整体布局在不同手机屏幕上都能保持稳定和合理的显示。

不过，在使用 vh 单位时也有一些注意事项。部分老版本的浏览器对 vh 的支持可能存在兼容性问题，所以在实际项目中，最好结合其他单位或使用浏览器前缀来确保广泛的兼容性。另外，由于 vh 是基于视口高度计算，当页面出现滚动条时，可能会对布局产生一定影响，需要开发者进行细致的测试和调整。

CSS Viewport 单位中的 vh 为创建适配手机屏幕的网页布局提供了便捷且强大的工具。掌握并合理运用 vh，能够让我们的网页在各种手机设备上呈现出完美的视觉效果，提升用户体验。