如何用 CSS clamp() 函数让字体在移动端自适应大小

日期：2026-01-19 00:00 / 作者：冰川箭仙

clamp()实现字体自适应的核心是设定有上下限的动态字号：最小值保小屏可读，建议值（如4vw）线性缩放，最大值防大屏溢出；例如h1{font-size:clamp(1.25rem,4vw,2.5rem)}覆盖iPhone SE到iPad Pro竖屏。

用 clamp() 让字体在移动端自适应，核心是设定一个随视口变化的、有上下限的动态字号，既避免小屏文字过小看不清，也防止大屏文字过大破坏布局。

clamp(最小值, 建议值, 最大值) 是 CSS 中的“弹性边界函数”。浏览器会取三者中“最合理”的那个值：

例如标题字体适配常见手机到平板范围：

h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); }

拆解来看：

如果项目使用 1rem = 16px 标准，且设计稿按 375px 宽度标注标题为 20px（即

1.25rem），可这样微调：

h1 { font-size: clamp(1.125rem, 20px + 2vw, 1.5rem); }

这种写法把“建议值”设为带基准的表达式，让缩放起点更贴近设计意图，小屏保底 18px，大屏封顶 24px，中间平滑过渡。