clamp()可解决纯vw字体小屏过小问题：设min≥12px保可读，preferred含vw实现响应，max≤32px防撑爆；需配合text-size-adjust: 100%使系统缩放生效。
用 clamp() 替代纯 vw 防止小屏文字缩到看不见
纯 vw 字体在 iPhone SE（320px 宽）上会缩到 2vw = 6.4px，远低于可读下限（通常 ≥12px），这不是 bug，是单位本身没设底线。直接写 font-size: 2vw 等于把字号交给视口宽度“裸奔”。clamp() 能强制兜底：最小值保可读，最大值防撑爆，中间值做平滑过渡。
正确写法示例：
h1 { font-size: clamp(18px, 4vw + 0.5rem, 32px); }
要点：
-
min必须是绝对单位（如18px），确保小屏不跌破可读阈值 -
preferred必须含动态单位（如4vw + 0.5rem），纯rem或px就退化成静态值 -
max建议 ≤28–32px，避免大屏（如 2560px）下正文行高失衡 - 必须在真实设备上验证：320px 宽时是否 ≥18px？开了系统「更大字体」后是否仍能响应？
加 text-size-adjust: 100% 让系统字体缩放真正生效
很多页面写了 clamp() 却发现用户调大系统字体后文字纹丝不动——根源是浏览器默认启用了 Font Boosting，它会劫持小字号文本并强制放大，但只对未设限制的流式文本生效，且与系统缩放互斥。禁用它才能让 rem、clamp() 和系统设置联动。
推荐写法：
html { text-size-adjust: 100%; }
注意：
- 别用
text-size-adjust: none，它会彻底屏蔽用户通过系统设置调整字体的能力，违反无障碍规范 - 该声明必须作用在
html或body上，写在p或div里无效 - 旧版 Safari（@media (max-width: 375px) { h1 { font-size: 18px; } }）
避免 flexible.js 类脚本引发的字体爆炸
如果你还在用类似 flexible.js 的 JS 方案做 rem 适配，要特别小心：它会基于 window.devicePixelRatio 动态缩放 html 的 font-size，而 WebKit 内核会因此触发 Font Boosting，导致文字被二次放大，结果不可控且调试困难。
更稳妥的做法：
- 停用
flexible.js，改用纯 CSS 的clamp()+text-size-adjust组合 - 如果必须保留 JS 控制，至少加 fallback：
:root { font-size: clamp(16px, 2.5vw, 24px); }，JS 加载后再接管 - 检查
viewportmeta 标签是否为initial-scale=1，否则 Font Boosting 触发条件更宽松
横竖屏切换时字体跳变的临时修复
Safari 在横竖屏切换瞬间，window.innerWidth 可能返回错误值（比如地址栏收起前的临时宽度），导致根字号计算异常。这不是你代码写错了，是浏览器渲染时机问题。
简单有效的应对：
- 给关键文字容器加
min-width: 0或max-width: 100%，防止 layout shift 放大跳变感 - 若用 JS 动态改
document.documentElement.style.fontSize，务必加节流（throttle），延迟 100ms 再执行 - 优先用 CSS 原生方案，现代浏览器（Chrome 88+/Safari 14.1+/Firefox 79+）已原生支持
clamp()，无需 JS 干预
真正难的不是写出那行 font-size，而是想清楚：这个标题在 320px 宽的 iPhone SE 上最小不能低于多少像素，在 2560px 宽的 4K 屏上最大不能超过多少像素，以及用户开了系统「更大字体」后是否还能正常阅读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
