请说说你对vh、vw的理解以及它们的运用场景是什么？

vh 和 vw 是 CSS 中的相对单位，它们分别代表视口高度（Viewport Height）和视口宽度（Viewport Width）的百分比。

运用场景：

vh 和 vw 单位在以下场景中非常有用：

创建全屏元素： 设置元素的高度为 100vh 和宽度为 100vw 可以使其覆盖整个视口，从而创建全屏背景、全屏覆盖的弹出窗口或全屏英雄图片等效果。
根据视口大小调整字体大小： 使用 vw 单位可以根据视口宽度动态调整字体大小，确保文本在不同屏幕尺寸下都具有良好的可读性。例如，font-size: 2vw; 会使字体大小随着视口宽度的变化而变化。
创建响应式布局： vh 和 vw 可以用来创建各种响应式布局，使元素的大小和位置根据视口大小进行调整。例如，可以使用 vw 来设置元素的宽度，使其在不同屏幕尺寸下占据相同的比例。
保持元素的宽高比： 通过结合使用 vw 和 padding-top 或 padding-bottom，可以保持元素的宽高比，例如创建一个始终为 16:9 的视频容器。
创建视差滚动效果： 结合 JavaScript，可以使用 vh 和 vw 创建视差滚动效果，使背景图像或其他元素以不同的速度滚动，从而增强视觉效果。

需要注意的点：

移动设备上的地址栏： 在移动设备上，地址栏的显示和隐藏会影响视口的高度。这可能会导致使用 vh 单位的元素高度发生变化，从而产生抖动或布局错乱。可以使用 JavaScript 或 CSS 的一些技巧来解决这个问题，例如监听 resize 事件或使用 vh 和 constant() 函数的组合。
根元素的字体大小： rem 单位是相对于根元素（通常是 <html> 元素）的字体大小计算的。如果根元素的字体大小使用 vw 单位设置，那么 rem 单位也会受到视口大小的影响。
可访问性： 过度依赖 vh 和 vw 可能会导致可访问性问题。例如，如果字体大小完全依赖于视口宽度，那么用户可能无法通过浏览器设置调整字体大小。