vw 和 vh 是基于视口宽度和高度的 css 单位，1vw 等于视口宽度的 1%，1vh 等于高度的 1%，可实现元素尺寸的响应式自适应。它们适用于全屏布局（如 height: 100vh）、响应式字体（如 calc(16px + 2vw)）、等比容器（如 width: 80vw; height: 80vw）及弹性间距控制。使用时需注意移动端地址栏导致的 100vh 异常、小屏文字溢出问题，建议结合 clamp() 限定范围，并为老浏览器提供 px 回退方案，以提升兼容性与体验一致性。
在响应式设计中，vw 和 vh 是非常实用的 CSS 单位，它们基于视口大小动态调整元素尺寸，让页面布局更灵活。合理使用这些单位，可以减少媒体查询的依赖，提升适配效率。
理解 vw 和 vh 的含义
vw（viewport width） 表示视口宽度的 1%，例如：100vw 等于当前屏幕宽度；vh（viewport height） 表示视口高度的 1%。与固定像素不同，它们会随设备屏幕变化自动缩放。
举个例子：设置一个元素宽度为 50vw，它将始终占据屏幕宽度的一半，无论是在手机还是桌面端。
常见响应式应用场景
这些单位特别适合需要全屏或比例控制的布局场景：
立即学习“前端免费学习笔记（深入）”；
- 全屏展示区域：用 height: 100vh 实现登录页或引导页的满屏显示，避免内容被截断或留白过多。
- 响应式字体大小：结合 calc() 使用，如 font-size: calc(16px + 2vw)，让文字随屏幕变大而增大。
- 等比例容器：创建始终保持宽高比的盒子，比如 width: 80vw; height: 80vw 可做一个响应式正方形。
- 视口间距控制：使用 margin: 10vh 5vw 设置上下左右边距，使空白区域随屏幕缩放保持协调。
注意事项与兼容性处理
虽然 vw/vh 很方便，但实际使用时需注意一些问题：
- 移动端浏览器（如 Safari）可能存在地址栏隐藏导致视口变化的问题，100vh 可能超出实际可见区域，此时可考虑用 JavaScript 动态获取真实可视高度，或改用 100% 配合父级约束。
- 小屏幕下过大的 vw 字体可能导致文字溢出，建议配合 @media 查询设置上下限，例如使用 clamp(16px, 4vw, 24px) 限定字体范围。
- 老版本浏览器支持有限，若需兼容 IE9 及以下，应提供 px 回退方案。
基本上就这些。掌握 vw 和 vh 的使用节奏，能让响应式更简洁高效，关键在于根据内容需求合理设定比例，同时兼顾极端屏幕下的体验。不复杂但容易忽略细节。
