clamp() 是当前最优解，它用「最小值—理想值—最大值」三段区间实现字体自适应，兼顾小屏防过小、大屏防溢出，比纯 vw 更安全、比 rem 更轻量，且无 JS 隐性成本。
直接用 clamp() + vw 就能解决绝大多数场景，不需要 JS 动态改 font-size，也不必折腾 rem 计算逻辑。
为什么 clamp() 是当前最优解
它把字体大小限制在「最小值—理想值—最大值」三段区间里，浏览器自动插值，既防小屏过小（iOS 强制最小 12px），也防大屏撑爆布局。比纯 vw 安全，比 rem 更轻量，且无 JS 执行时机、节流、横竖屏监听等隐性成本。
-
clamp(1.2rem, 4.2vw, 2.5rem)表示：视口缩小时不低于1.2rem，放大时不超过2.5rem，中间按4.2vw平滑过渡 - 实际效果：iPhone SE 上约 16px，iPad Pro 上约 42px，桌面端稳定在 40px 左右
- 不依赖 JS 初始化时机，不触发重排，无闪动风险
vw 单位必须配合 min/max 控制才可靠
单独写 font-size: 5vw 在小屏上会掉到 10px 以下，iOS Safari 会强制拉高到 12px，导致字号跳变、行高错乱；大屏上又可能冲到 80px+，破坏视觉层级。
- 错误写法：
font-size: 5vw;→ iPhone 320px 时仅 16px，但设计稿基准是 375px，比例已偏移 - 正确写法：
font-size: clamp(1.125rem, 3.8vw, 2.25rem);（对应 18px–36px 区间） - 计算建议：用 min-max-calculator 输入设计稿字号和目标断点，自动生成参数
rem 方案还在用？注意三个硬伤
如果你仍用 JS 动态设置 document.documentElement.style.fontSize，得确认是否踩中这些坑：
立即学习“前端免费学习笔记（深入）”；
- 横竖屏切换时没监听
window.matchMedia('(orientation: landscape)')，只靠resize事件，iOS Safari 不触发 - 初始化时机太晚（比如等
DOMContentLoaded），首屏渲染时根字号还是默认 16px，布局抖动 - 安卓 WebView 对
rem计算有延迟，body.offsetHeight强制重排仍可能漏帧
line-height 和 letter-spacing 怎么同步自适应
字体变，间距也得跟着“活”起来，否则小屏挤、大屏散。
-
line-height必须用无单位数值（如1.4），不能写20px或1.4rem—— 后者会二次叠加根字号 -
letter-spacing用em：比如letter-spacing: 0.02em，它始终是当前字体的 2% - 避免混用单位：
padding: 0.5rem 2vw容易因渲染精度误差导致左右不对齐，统一用rem或统一用vw
真正难的不是写对一行 clamp()，而是所有文本相关属性（font-size、line-height、letter-spacing、margin-top）是否都遵循同一套响应逻辑。漏掉一个，就可能在某个机型上突然失衡。
