使用 vw 单位配合 clamp() 实现文字随窗口宽度等比缩放，如 font-size: clamp(16px, 4vw, 48px)，兼顾小屏可读性与大屏限制，避免 %/em/rem 的链式依赖或静态根字号问题，优于媒体查询的离散响应。
用 vw 单位让文字随窗口宽度等比缩放
直接用 vw（viewport width）是最简单有效的方案。1vw 等于视口宽度的 1%，所以 font-size: 4vw 表示字体始终是窗口宽度的 4%。
但要注意：小屏下可能过小（比如手机上 4vw ≈ 12px），大屏下又可能过大（4vw 在 2560px 屏幕上 ≈ 102px）。实际用时得加限制：
- 用
clamp()设定最小、理想、最大值：font-size: clamp(16px, 4vw, 48px) - 避免在窄屏（如 iPhone 竖屏 ≈ 375px）下小于 14px，影响可读性
-
vw只响应宽度变化，高度缩放不影响字体——这点常被误以为“响应式不完整”
为什么不用 % 或 em？
% 和 em 依赖父元素 font-size，不是直接响应视口，容易链式失真。比如嵌套三层 em，缩放逻辑就很难控制；而 rem 虽基于根元素，但默认根字号固定（通常是 16px），不随窗口变。
除非你主动监听 resize 并动态改 document.documentElement.style.fontSize，否则这些单位做不到真正“随窗口缩放”。手动 JS 方案反而增加复杂度和性能开销。
- 常见错误：写
font-size: 1.2em以为能缩放——其实只是继承父级大小，窗口缩放时完全不变 - 调试时可用浏览器开发者工具实时拖动窗口，观察 computed styles 中
font-size是否真在变
clamp() 的三个参数怎么选？
clamp(min, preferred, max) 是现代 CSS 的关键。它不是简单取极值，而是当视口宽度使 preferred 值落在 min 和 max 之间时，优先用 preferred；超出范围才截断。
- 典型组合：
clamp(1rem, 2.5vw, 1.5rem)—— 小屏保底 16px，中屏线性增长，大屏封顶 24px - 注意单位混用：第一个和第三个参数建议用
px或rem，中间用vw，避免全用vw导致两端失控 - 移动端 Safari 对
clamp()支持从 iOS 14.5 起才稳定，老版本需降级 fallback（如媒体查询）
需要兼容旧浏览器怎么办？
如果必须支持 IE 或老 Android 浏览器，vw 和 clamp() 都不可用，只能退回到媒体查询 + 多档断点。
例如：
h1 {
font-size: 18px;
}
@media screen and (min-width: 480px) {
h1 { font-size: 22px; }
}
@media screen and (min-width: 768px) {
h1 { font-size: 28px; }
}
@media screen and (min-width: 1200px) {
h1 { font-size: 36px; }
}
这种写法可控但维护成本高，新增尺寸要同步改多处。更麻烦的是，它只响应“离散断点”，窗口在两个断点之间拖动时字体不会平滑变化——这点和 vw + clamp() 的连续响应有本质区别。
真正难处理的不是代码怎么写，而是设计侧没给清晰的缩放比例需求：是希望文字在所有设备上保持相同视觉重量？还是维持行宽在 45–75 字符？这些隐含约束，往往比技术选型更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
