clamp()三参数为min、preferred、max，浏览器线性插值计算字体大小：min设最小可读尺寸（如1rem），preferred用相对单位（如2.5vw），max设上限（如2.5rem），禁混用单位类型。
clamp() 的三个参数到底怎么填
直接说结论：字体缩放不是靠猜，而是由 min、preferred、max 三值共同约束，浏览器在视口变化时线性插值计算——但很多人把 preferred 当成“默认值”硬写死一个像素值，结果在小屏上字体卡在 min 不缩，大屏又撞到 max 不再涨。
实操建议：
-
min应设为最小可读尺寸（比如1rem或16px），低于它文字会模糊或难辨 -
preferred推荐用相对单位配合视口单位，例如2.5vw或calc(1rem + 0.5vw)，让它随屏幕自然浮动 -
max要留余量，比如设2.5rem，避免在 4K 屏上文字撑爆容器 - 别混用单位类型（如
clamp(16px, 2vw, 32px)可行；但clamp(1rem, 2em, 2.5rem)会因基准不同导致非预期跳变）
为什么在 Safari 里 clamp() 字体不缩放
常见错误现象：font-size: clamp(1rem, 2.5vw, 2rem) 在 Chrome/Firefox 正常响应，在 Safari（尤其是 iOS 15–16）完全不动，始终显示 1rem。
根本原因不是 Safari 不支持 clamp()，而是它对视口单位（vw）在页面加载初期的解析有延迟，尤其当 CSS 写在 且无明确 viewport meta 时。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，缺一不可 - 避免在
@media查询内嵌套clamp()，Safari 对嵌套函数解析更脆弱 - 若仍异常，临时用
font-size: clamp(1rem, 2.5vh, 2rem)测试——vh在 Safari 中兼容性略稳，可辅助定位是否为vw解析问题
和 media query 比，clamp() 真的更“平滑”吗
是的，但仅限于数值连续变化场景。比如从 375px 宽度过渡到 414px，clamp(1rem, 2.5vw, 2rem) 会算出 1.025rem → 1.035rem 这类微调；而 @media (min-width: 400px) 是阶梯式切换，中间 25px 宽度区间字体完全不变。
不过要注意实际体验瓶颈：
- 人眼对小于 0.1rem（约 1.6px）的变化几乎无感，所谓“平滑”更多是数学意义
- 如果设计系统本身只定义了 3 档字号（小/中/大），强行用
clamp()反而增加维护成本 - 动画中使用
clamp()作字体变化，需配合transition: font-size，否则 resize 时仍是突变（浏览器不会自动补帧）
移动端适配时，clamp() 配合 rem 该怎么设根字体
很多人以为 clamp() 能替代 rem 根字体动态调整，其实二者逻辑不同：clamp() 控制单个属性值范围，rem 依赖 html 的 font-size 基准——两者可以共存，但不能互相替代。
实操建议：
- 保持
html { font-size: 16px }作为基准，不要用clamp()直接改html的font-size（iOS Safari 对根元素clamp()支持极差） - 需要全局缩放时，用 JS 监听
resize动态设document.documentElement.style.fontSize，再让各处rem自然响应 - 若坚持纯 CSS，可写
font-size: clamp(1rem, 2.5vw, 2rem)，此时1rem仍按 16px 解析，2.5vw才真正承担响应任务
最易被忽略的一点：clamp() 的插值是线性的，但人的阅读舒适区不是。窄屏下文字行宽变短，有时需要的不只是缩小字号，还要加大行高、调整字间距——这些没法靠一个 clamp() 解决，得搭配 line-height 和 letter-spacing 的独立响应逻辑。
