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高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 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 挤占空间

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！