clamp()实现字体自适应的核心是设定有上下限的动态字号：最小值保小屏可读，建议值（如4vw）线性缩放，最大值防大屏溢出；例如h1{font-size:clamp(1.25rem,4vw,2.5rem)}覆盖iPhone SE到iPad Pro竖屏。
用 clamp() 让字体在移动端自适应，核心是设定一个随视口变化的、有上下限的动态字号，既避免小屏文字过小看不清，也防止大屏文字过大破坏布局。
理解 clamp() 的三个参数
clamp(最小值, 建议值, 最大值) 是 CSS 中的“弹性边界函数”。浏览器会取三者中“最合理”的那个值：
- 最小值：屏幕极窄时（如 iPhone 竖屏）强制使用的最小字号，保障可读性
-
建议值：通常写成
vw单位（如4vw），随视口宽度线性缩放 - 最大值：屏幕足够宽时（如桌面端）不再继续变大，保持视觉平衡
一个实用的移动端字体响应式写法
例如标题字体适配常见手机到平板范围：
h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); }拆解来看：
立即学习“前端免费学习笔记（深入）”；
- 当视口宽度 ≈ 312.5px（1.25rem ÷ 4vw = 1.25 ÷ 0.04），
4vw等于1.25rem，此时开始生效 - 当视口宽度 ≈ 625px（2.5rem ÷ 4vw），
4vw达到2.5rem，再宽就锁定为2.5rem - 实际覆盖了从 iPhone SE 到 iPad Pro 竖屏的主流区间，无需媒体查询
配合 rem 和设计稿基准更可控
如果项目使用 1rem = 16px 标准，且设计稿按 375px 宽度标注标题为 20px（即 1.25rem），可这样微调：
h1 { font-size: clamp(1.125rem, 20px + 2vw, 1.5rem); }这种写法把“建议值”设为带基准的表达式，让缩放起点更贴近设计意图，小屏保底 18px，大屏封顶 24px，中间平滑过渡。
注意避坑的细节
-
vw基于视口总宽度，横屏时可能突变，关键文字建议搭配min-width或媒体查询兜底 - 不要对所有文本盲目套用，正文段落更适合用
clamp(1rem, 1.2vw + 0.8rem, 1.25rem)这类更平缓的曲线 - 旧版 Safari（iOS 13.4 之前）不支持
clamp()，需加font-size: 1.25rem;作为降级
