clamp()设置字号必须单位兼容、顺序正确、首选值合理浮动，否则整条声明被浏览器丢弃；Safari中clamp不生效主因是vw解析延迟，缺viewport meta或嵌套@media会加剧问题。

直接说结论：用 clamp() 设置字号上下限，必须保证三个参数单位兼容、顺序正确、且首选值能随视口合理浮动；填错一个就整个声明被浏览器丢弃，字会回退到默认大小。

为什么 clamp(16px, 2.5vw, 24px) 在 Safari 里不动

常见现象是 Chrome 正常缩放，Safari（尤其 iOS 15–16）始终显示 16px。这不是不支持 clamp()，而是它对 vw 的初始解析有延迟：

• 缺 时，vw 基准可能为 0 或异常值
• 把 clamp() 套在 @media 里会加剧解析失败
• 可临时换 vh 测试：比如 clamp(1rem, 2.5vh, 2rem)，若变正常，说明是 vw 加载时机问题

clamp() 三个参数怎么填才不翻车

顺序错、单位混、数值不合理，都会让整条声明失效（浏览器静默丢弃，不报错）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 顺序必须是 min、preferred、max —— 写成 clamp(2.5vw, 16px, 24px) 就直接无效
• min 和 max 推荐统一用 px 或 rem，避免和 preferred 的 vw 混算出意外值
• preferred 别只写纯 vw，加固定偏移更稳：比如 2.5vw + 0.75rem，防止 iPhone SE（320px）下 2.5vw = 8px 被压到 min 后字太糊
• min 建议 ≥14px（iOS 可读下限），max 要结合容器宽度留余量，比如卡片内标题设 48px 可能撑破布局

如何让 line-height 也跟着 clamp() 字号自适应

line-height 不支持直接套 clamp()（它只接受无单位数值或长度值，而 clamp() 返回的是计算后长度）：

• 最稳妥做法是用无单位值，例如 line-height: 1.4 —— 它会自动随 font-size 缩放
• 若需更精细控制（如小屏拉高行高防拥挤），可用 calc() 模拟：比如 line-height: calc(1.2 + 0.02 * (100vw - 320px) / (1440 - 320))，但维护成本高，真机测试易出渲染抖动
• 旧版 Safari 对无单位 line-height 在 clamp() 字号下偶有异常，务必用 iOS 真机调试，别信模拟器

真正容易被忽略的点是：clamp 不是“设完就跑”，它依赖视口单位实时重算，而某些 WebView（比如微信内嵌页、老版 Samsung Internet）会在首屏渲染时卡在 min，之后才跳变——这时加一句降级 font-size: 1.125rem 在 clamp() 前面，反而比硬扛更可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！