clamp()实现响应式字体的关键是三个参数必须在真实视口区间内形成有效插值，否则中间值不生效；需实测320px至1920px及系统字体放大模式下的表现，并配合无单位line-height和em单位letter-spacing同步缩放。
直接用 font-size: clamp(16px, 4vw, 24px) 就能实现平滑、可控的响应式字体缩放，但多数人填错参数导致小屏字太小、大屏锁死不动——关键不是“能不能用”，而是三个值是否在真实视口区间内形成有效插值。
clamp() 的三个参数怎么算才不白写
写了 clamp(16px, 4vw, 24px) 却没看到字体流动？大概率是中间值根本没生效。浏览器只在「min preferred max」成立时才插值，否则直接取边界值。
- 先反推生效区间：
16px / 4vw = 400px→ 小于 400px 时永远取 16px；24px / 4vw = 600px→ 大于 600px 时永远取 24px；真正线性变化仅发生在 400–600px 之间，窄得几乎无感 - 想让字体在 375px（iPhone SE）显示 18px、在 1440px（桌面宽屏）显示 22px，就该用公式算系数：
(22 - 18) / (1440 - 375) * 100 ≈ 0.375vw，再解偏移量：18px - 0.375vw × 375 ≈ 3.8px，最终写成clamp(1.125rem, 0.375vw + 0.24rem, 1.375rem) - 单位必须一致：全用
px或全用rem，混用vw和em可能因继承链断裂导致计算失效
为什么 font-size: clamp() 在某些旧版 Safari 上不生效
因为 Safari 13.1 才开始支持 clamp()，而 iOS 13.4 之前的 WebKit 存在解析 bug：当 clamp() 出现在 @media 块内，或与 var(--size) 组合使用时，可能被静默丢弃。
- 降级必须写两行，且顺序不能错：
font-size: 18px;写在前，font-size: clamp(16px, 2.5vw, 24px);写在后——老浏览器忽略第二行，新浏览器覆盖第一行 - 避免嵌套写法，如
font-size: clamp(var(--min), var(--pref), var(--max))，改为直接写死数值或用 JS 注入 - 别依赖
clamp()控制按钮文字是否截断，它只是辅助手段，关键交互文案建议加硬下限，例如clamp(14px, 2vw, 16px)
vw 单位在侧边栏或窄容器里字特别大怎么办
vw 永远按整个视口宽度计算，不是按父容器。一个 200px 宽的 sidebar 里写 font-size: 4vw，在 1920px 屏幕上就是 76.8px，比主内容区还夸张。
立即学习“前端免费学习笔记（深入）”；
- 遇到窄区域（如导航菜单、卡片标题、弹窗按钮），改用
rem或em+ 媒体查询兜底，比如font-size: clamp(0.875rem, 1.2rem, 1.125rem) - 若非要保留流体感，可配合
@container（需现代浏览器支持）：@container (width > 300px) { h3 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); } } - 绝对不要在
<table>单元格或flex子项里无脑套4vw——先测真实渲染宽度，再反推合理vw系数
line-height 和 letter-spacing 怎么同步缩放
clamp() 只改 font-size，但 line-height 若写死数值（如 line-height: 1.5），会导致小屏下文字挤在一起、大屏下空隙过大。
-
line-height必须用无单位值（如1.4），它会随font-size自动缩放 - 需要微调节奏时，可用
clamp()同步控制：line-height: clamp(1.3, 1.4vw + 1.2, 1.5)，但注意单位一致性 -
letter-spacing推荐用em或rem，例如letter-spacing: 0.02em，避免px在缩放时失衡
真正难的不是写出 clamp()，而是算准那组数字在你实际设备断点上的表现——拉满窗口测 320px，缩到最小看 1920px，再开系统字体放大模式验证，三者缺一不可。
