clamp()三参数为min、preferred、max,即最小值、理想值(须含vw等动态单位)、最大值;浏览器取preferred计算值,若小于min则取min,大于max则取max,否则取preferred,三者共同确保字号在视口变化时平滑自适应且不越界。

clamp() 能实现无需媒体查询的流式字体,但必须理解它的三值逻辑和视口单位限制——直接套公式容易在小屏上字体过大、大屏上增长乏力。
什么是 clamp() 的三个参数?
clamp() 接收三个值:min、preferred、max,格式为 clamp(min, preferred, max)。它不是简单插值,而是:当 preferred 小于 min 时取 min;大于 max 时取 max;否则取 preferred(可为带 vw 的表达式)。
常见错误是把 preferred 写成固定值(如 clamp(1rem, 2rem, 3rem)),这等同于静态值,完全失去响应能力。
-
min应设为最小可读尺寸(如1rem或16px),避免小屏文字过小 -
preferred必须含相对单位(推荐vw),例如2.5vw + 1rem,才能随视口变化 -
max是安全上限(如3rem),防止大屏下字体失控
为什么 2.5vw + 1rem 比纯 4vw 更可靠?
纯 vw(如 clamp(1rem, 4vw, 3rem))在窄屏下极易超标:iPhone SE(375px)时 4vw = 15px,刚好卡在 min 边界,但稍宽一点(如 414px)就跳到 16.56px,而用户可能需要更稳的起始尺寸。
立即学习“前端免费学习笔记(深入)”;
用线性表达式(如 2.5vw + 1rem)能锚定基线:
- 在 320px 宽度下:
2.5vw = 8px,加1rem ≈ 16px得24px,大概率高于min,实际生效 - 在 1920px 下:
2.5vw = 48px,加16px得64px,但被max截断,确保不溢出 - 斜率
2.5可调:数值越小,字体随宽度变化越平缓;越大则越敏感
实际项目中怎么写才不踩坑?
直接复制网上示例常导致移动端文字偏大、行高塌陷或与设计稿偏差。关键要结合设计系统校准:
- 先确定设计稿基准:比如 Figma 中标题在 375px 宽度下应为
24px,在 1440px 下为48px,据此反推公式 - 用两点式线性方程求解斜率:若
width₁ = 375,size₁ = 24;width₂ = 1440,size₂ = 48,则斜率m = (48−24)/(1440−375) ≈ 0.0225,即2.25vw,再补常数项得2.25vw + 15.9px - 务必用
rem或px写min/max,避免嵌套em引发继承放大 - 测试真机:iOS Safari 对
clamp()支持完好,但旧版 Android WebView(Chrome font-size: 1.5rem
最易被忽略的是:字体大小变化后,line-height 和 letter-spacing 往往没同步响应——它们不会自动随 font-size 缩放,必须单独用 clamp() 或视口单位重写。


















