CSS vw vh 单位使用注意 是基于页面可视区域的，不是基于父级的

vh 单位

• 含义：vh是 “Viewport Height” 的缩写，代表视口高度的百分比。1vh 等于视口高度的 1%。

• 示例：如果浏览器视口的高度是 1000px，那么 1vh 就等于 10px。如果将一个元素的高度设置为 50vh，那么这个元素的高度将始终是视口高度的 50%，无论视口如何缩放。在上述例子中，该元素的高度就是 500px。在实际应用中，常用于创建占据一定视口高度比例的元素，比如全屏背景图片、半屏的导航栏等。

vw 单位

• 含义：vw是 “Viewport Width” 的缩写，代表视口宽度的百分比。1vw 等于视口宽度的 1%。

• 示例：假设浏览器视口的宽度是 800px，那么 1vw 就等于 8px。若将一个元素的宽度设置为 30vw，那么这个元素的宽度就是 240px。常用于使元素的宽度随视口宽度自适应变化，比如创建响应式的导航菜单，使其在不同宽度的设备上都能合理显示。

vh 和 vw 的优点

• 响应式布局：能够让网页元素根据浏览器窗口的大小自动调整尺寸，适应不同设备的屏幕，提供更好的用户体验。

• 简化设计和开发：不需要针对不同的屏幕尺寸和分辨率编写大量复杂的媒体查询和特定的 CSS 规则，减少了代码量，提高了开发效率。

• 流畅的交互效果：在用户调整浏览器窗口大小时，使用vh和vw单位的元素能够平滑地进行缩放，实现流畅的视觉效果，增强了网页的交互性。