clamp() 是纯 CSS 响应式字体函数，通过「最小值、首选值、最大值」三参数实现平滑缩放，比 media query 更简洁自然；需注意单位统一、vw 基准、可读性下限及兼容性降级。
clamp() 是什么，为什么它比 media query 更适合字体响应式
它不是 JS，是纯 CSS 的计算函数，直接在 font-size 里用就能让字体在最小值和最大值之间平滑缩放，不用写一堆 @media 断点。浏览器根据视口宽度实时算出当前该用多大的字号，视觉过渡更自然，维护成本也低。
常见错误是把 clamp() 当成“自动适配神器”，随便填三个值就完事——比如 clamp(14px, 2vw, 20px)，结果小屏下字太小看不清，大屏又卡在 20px 不再变大，白白浪费空间。
-
clamp()三个参数必须是「最小值、首选值、最大值」，顺序错一个就失效（浏览器会整个声明丢弃） - 首选值推荐用相对单位：
vw最常用，rem或em也可，但不能混用绝对+相对单位（如clamp(14px, 2em, 20px)无效） - 注意
vw基准是视口宽度，不是父容器；如果容器本身有 padding 或 max-width 限制，实际可缩放范围会被压缩
怎么选 clamp 的三个值才不翻车
关键不是“填满区间”，而是匹配真实阅读场景：小屏要保证可读性，大屏要避免字太大撑破布局。拿正文 p 标签举例，常见靠谱组合是 clamp(14px, 2.5vw, 18px)，但得看设计稿基准。
容易踩的坑是忽略设备像素比和系统字体缩放。iOS Safari 在「显示与文字大小」调大时，vw 计算不受影响，但用户实际看到的字可能糊或挤——这时得配合 text-size-adjust: 100% 防止双倍缩放。
立即学习“前端免费学习笔记（深入）”；
- 小屏下限建议 ≥14px（iOS 默认最小可读字号），低于这个值用户可能需要放大手势才能看清
- 首选值用
vw时，系数别盲目套 2%～3%，先用calc(100vw / 40)这类等价写法反推：40 是期望在 400px 宽度下显示 10px 字号，再按比例调整 - 上限别硬设死，比如标题可用
clamp(24px, 5vw, 48px)，但得确认设计系统里 48px 真是最大允许字号，否则大屏 iPad Pro 上可能溢出卡片
兼容性问题和降级方案怎么写才不拖累现代浏览器
clamp() 在 Chrome 88+、Firefox 79+、Safari 14.1+ 原生支持，但旧版 Safari（尤其是 iOS 13.7 及更早）完全不认。不能只靠 @supports 包一层就完事，因为很多构建工具（如 PostCSS 插件）会把 clamp() 编译掉或转成静态值，反而破坏响应逻辑。
真正稳妥的做法是「层叠覆盖」：先写一个安全的固定字号作为兜底，再在后面覆盖 clamp() 声明。浏览器不支持就自动回退，支持的则优先用动态版本。
h1 {
font-size: 24px; /* 旧浏览器兜底 */
font-size: clamp(24px, 5vw, 48px); /* 支持的浏览器覆盖 */
}- 别用
@supports (font-size: clamp(...))做条件加载——部分老 Android WebView 会误判支持，结果渲染空白 - Next.js / Vite 等框架若开了 CSS 压缩，检查是否启用了
postcss-clamp类插件，它们常把clamp()错误转成calc()导致计算错误 - 如果项目必须兼容 iOS 12，只能放弃
clamp()，改用media query + calc()组合，但断点数量控制在 3 个以内，否则 CSS 体积膨胀明显
字体缩放和 line-height、letter-spacing 怎么联动
只调 font-size 是不够的。字号变了，行高和字间距如果不跟着动，小屏下文字会挤在一起，大屏下又显得松散空洞。但不能给每个属性都套 clamp()——性能差，而且三者缩放节奏本就不该一致。
实践下来最稳的方式是：用 font-size 驱动 line-height，用固定比例（如 line-height: 1.4）；letter-spacing 则用极小的 em 单位微调，比如 letter-spacing: 0.01em，这样它会随字号同比例缩放，又不会过度拉伸。
- 避免对
line-height用clamp()，会导致行高在小屏突然变小，行间距离不足，阅读疲劳 -
letter-spacing别用px，否则字号变大时字间距不变，视觉上越来越紧 - 图标字体（如 Font Awesome）如果和文字混排，记得单独设
font-size: 1em，否则clamp()会影响图标大小，导致对齐错乱
事情说清了就结束。真正难的不是写出 clamp()，而是想清楚字号变化背后对应的是阅读距离、屏幕密度、甚至用户视力习惯——这些没法用代码自动判断。
