clamp()比media query更适合响应式字体，因其基于浏览器原生插值实现线性过渡，避免断点处字体跳变，且声明式、零JS、性能更优。
clamp() 为什么比 media query 更适合响应式字体
因为 clamp() 是浏览器原生插值计算，断点处不会出现字体尺寸跳变。用 @media 切换 font-size 时，只要视口宽度跨过临界值，字体就“啪”一下变大或变小；而 clamp(min, preferred, max) 让浏览器在区间内线性过渡，视觉更自然。
常见错误是把 clamp() 当成仅用于移动端适配——其实它更适合「窄屏保下限、宽屏控上限、中间自适应」这种连续场景，比如正文、标题、卡片文字。
-
min应设为最小可读尺寸（如1rem），别用px，否则缩放失效 -
preferred推荐用视口单位（vw或vmin），但需注意：纯4vw在超宽屏会失控，必须配合max -
max不是“最大好看值”，而是防止在 4K 屏上字号膨胀到 32px 以上影响行高和布局
怎么写一个真正可用的 clamp 响应式字体
直接写 font-size: clamp(1rem, 4vw, 1.5rem) 看似简洁，但实际在 1280px 宽度下可能已超 1.5rem（≈24px），失去上限控制——因为 4vw 在 1280px 时是 51.2px。
正确做法是先算出「preferred 表达式何时达到 max」，反推系数。例如希望 max = 1.5rem 在 1440px 触发，则系数 = 1.5rem / 1440px ≈ 0.0104rem/px，转成 vw 就是 1.04vw（因 1vw = 1% of viewport width）。
立即学习“前端免费学习笔记（深入）”；
- 推荐公式：
clamp(1rem, calc(1rem + 0.5vw), 1.5rem)——用calc()替代纯vw，避免低宽屏过小、高宽屏过大 - 移动端优先？用
vmin：clamp(1rem, 3vmin, 1.5rem)，在竖屏手机和横屏平板间更均衡 - 别在所有元素上滥用：按钮、图标文字通常不需要连续变化，
@media切两档更可控
浏览器兼容性与降级方案怎么写才不翻车
clamp() 在 Chrome 88+、Firefox 79+、Safari 14.1+ 支持，但 Safari 14.0 和旧版 Edge 会直接忽略整条声明——如果没写 fallback，字体就退回到继承值或浏览器默认值，页面可能错乱。
关键不是加 @supports，而是按 CSS 级联规则写：先写静态值，再覆盖 clamp()。浏览器不支持时自动忽略后一行。
h1 {
font-size: 1.5rem;
font-size: clamp(1.25rem, 4vmin, 2rem);
}
- 不要用
@supports (font-size: clamp(...))包裹整个规则块——增加维护成本，且无必要 - 别在
rem和px混用 fallback：font-size: 24px+clamp(1.5rem, ...)可能因根字体变化导致不一致 - SSR 场景下注意：服务端渲染时无法获取 viewport，但
clamp()是纯 CSS 计算，无需 JS，不影响首屏
和 rem/vw 方案比，clamp 的性能和可维护性差异
纯 vw 方案常配合 JS 监听 resize 动态改根字体，既重又易触发 layout thrashing；rem 配合媒体查询虽轻量，但断点一多就难维护。而 clamp() 是声明式、零 JS、单属性解决，浏览器内部优化成熟。
但要注意：过度依赖 vmin 或大系数 vw 会导致小屏设备字号过小（如 iPhone SE 上 2.5vmin ≈ 10px），可读性崩坏。
- 测试真机而非模拟器：iOS Safari 对
vmin的解析偶尔有偏差 - 设计系统中若需统一字号阶梯，建议抽成 CSS 自定义属性：
--fs-h1: clamp(1.5rem, 4vmin, 2.5rem)，方便全局调整 - 动画字体大小？
clamp()本身不可动画，但可以对font-size整体加transition，浏览器会在每次 resize 时平滑过渡
最常被忽略的是行高（line-height）。clamp() 只管字号，如果固定写 line-height: 1.2，小屏时行距会过紧。要么也用 clamp() 控制 line-height，要么改用无单位值——它会随字号等比缩放。
