CSS 视口单位：dvh/lvh/svh 解决移动端地址栏遮挡问题 大家好，今天我们来深入探讨CSS视口单位中的新秀：dvh、lvh 和 svh，以及它们如何优雅地解决移动端Web开发中常见的地址栏遮挡问题。在移动设备上，浏览器地址栏的出现和消失会动态改变视口高度，传统视口单位 vh 在这种情况下表现不尽如人意，可能导致页面元素被遮挡或布局错乱。dvh、lvh、svh 的出现正是为了解决这个问题，提供了更稳定和可预测的视口高度参考。 一、问题的由来：传统 vh 的局限性 在深入了解新型视口单位之前，我们首先回顾一下传统视口单位 vh 的定义和局限性。vh 代表视口高度的百分之一。例如，100vh 表示视口高度的 100%，也就是整个视口的高度。 在桌面浏览器中，vh 的行为通常符合预期，因为视口高度相对稳定。然而，在移动端浏览器中，情况就复杂多了。地址栏的显示与隐藏会动态改变视口的高度，导致以下问题： 元素被遮挡： 当地址栏显示时，100vh 计算出的高度会包含地址栏的高度，导致页面底部的元素被地址栏遮挡。 布局跳动： 当地址栏隐藏和显示切换时，100vh 的值会随之改变，导致页面元素 …