vw/vh是基于视口宽高的百分比单位，1vw=1%视口宽、1vh=1%视口高，不依赖父元素；而%单位依赖父容器尺寸，高度%在父无显式height时失效，vh则始终有效。
vw 和 vh 是 HTML5 中实现流体排版最直接的视口单位，它们让字体、间距、容器尺寸能随屏幕宽高自动缩放，无需依赖媒体查询断点。但直接套用容易踩坑，关键在理解计算逻辑和规避常见陷阱。
用 vw/vh 做根字体流体化
把 html 的 font-size 设为 vw 单位，是撬动整个 rem 体系流体化的基础：
-
html { font-size: 2.6vw; }表示根字号始终是视口宽度的 2.6%，小屏字小、大屏字大 - 后续所有
rem单位（如h1 { font-size: 2rem; }）都会随之等比缩放 - 注意：纯
2.6vw在超大屏（如 4K 显示器）可能过大，在超小屏（如旧款手机）可能过小，建议搭配clamp()
用 clamp() 控制字体上下限
单靠 vw 容易失控，clamp(min, preferred, max) 能守住可读性底线：
html { font-size: clamp(14px, 2.6vw, 20px); }- 意思是：最小不小于 14px，最大不超过 20px，中间按 2.6vw 流体过渡
- 这个写法在桌面端、平板、手机上都能保持视觉协调，避免横屏时文字撑满半屏
优先用 vmin/vmax 替代单纯 vw/vh
当需要更稳定的视觉比例（比如标题、卡片、图标），vmin 和 vmax 比单一方向单位更可靠：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 4vmin;—— 取视口宽高中较小者（竖屏看宽度、横屏看高度），字体大小始终“不溢出” -
width: 80vmax; height: 80vmax;—— 常用于全屏轮播图或背景遮罩，确保正方形元素始终贴合可见区域 - 注意：IE 完全不支持，如需兼容老系统，必须加媒体查询 fallback，例如
@media (max-width: 768px) { font-size: 16px; }
避开滚动条与地址栏导致的错位
100vw/100vh 看似全屏，实际常因浏览器 UI 变化而失效：
-
100vw包含垂直滚动条宽度（约 16–17px），直接设width: 100vw容易触发横向滚动条 - iOS Safari 地址栏收起时，
100vh不重算，导致底部留白或内容被遮挡 - 推荐方案：
height: 100dvh;（dynamic viewport height），现代浏览器实时响应地址栏变化；降级写法：height: 100vh; height: 100dvh;（后者覆盖前者） - 同时清空默认边距：
body { margin: 0; }，并确保父容器没有意外padding或border挤占空间
