clamp()实现响应式字体缩放需确保min≤preferred≤max在所有视口下成立，推荐全用px或rem避免混用，vw按视口宽计算易在窄容器中失真，line-height须用无单位值、letter-spacing用em以同步缩放。
直接用 clamp() 就能实现纯 CSS 响应式字体缩放，但多数人写错参数顺序或混用单位，导致小屏字更小、大屏锁死、Safari 不生效。
clamp() 三个参数怎么填才不翻车
它不是“取中间值”，而是按视口宽度在 min 和 max 之间线性插值——插值依据是第二项（偏好值）的计算结果。如果 4vw 在 320px 屏幕上算出来是 12.8px，而你设了 min: 16px，浏览器就直接取 16px；但如果写成 clamp(14px, 1rem, 18px)，而用户系统把 1rem 设成了 20px，那第二项就比 max 还大，结果永远卡在 18px。
- 必须保证
min ≤ preferred ≤ max在所有可能视口下都成立 - 推荐全用
px（最可控）或全用rem（适配系统字号），别混用 - 测试关键点：把窗口拉到 320px、768px、1920px，用开发者工具的 Computed 面板看最终生效的
font-size
vw 单位为什么在侧边栏/卡片里字大得离谱
vw 永远按整个视口宽度计算，不是父容器宽度。一个 200px 宽的 sidebar 写 font-size: 4vw，在 1920px 屏幕上就是 76.8px —— 比主内容还夸张。
- 窄区域（导航菜单、弹窗按钮、
table单元格）放弃vw，改用clamp(0.875rem, 1.2rem, 1.125rem)+ 媒体查询兜底 - 若需流体感且支持现代浏览器，用
@container替代：@container (width > 300px) { h3 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); } } - 务必先测真实渲染宽度（Box Model 面板），再反推合理
vw系数，别凭设计稿瞎套
Safari 里 clamp() 字体不缩放的常见原因
Chrome/Firefox 正常，Safari（尤其 iOS 15–16）始终卡在最小值，通常不是兼容性问题，而是解析时机或写法陷阱。
立即学习“Java免费学习笔记（深入）”；
- 必须有
<meta name="viewport" content="width=device-width, initial-scale=1">，缺一不可 - 避免在
@media块内嵌套clamp()，Safari 对嵌套函数更脆弱 - 别用 CSS 变量传参：
font-size: clamp(var(--min), var(--pref), var(--max))在旧版 WebKit 会被静默丢弃 - 临时用
vh测试是否为vw解析问题：font-size: clamp(1rem, 2.5vh, 2rem)
line-height 和 letter-spacing 怎么同步缩放
clamp() 只控制 font-size，但 line-height 若写死数值（如 line-height: 1.5），小屏会挤、大屏会空；letter-spacing 同理。
-
line-height必须用无单位值（如1.4），它会随font-size自动缩放 -
letter-spacing推荐用em（相对当前字体大小），例如letter-spacing: 0.02em - 绝对单位（
px）或固定百分比（%）都会破坏响应一致性
真正难的不是写出 clamp()，而是让 min/preferred/max 在所有设备、所有系统字号、所有容器上下文中都逻辑自洽——这需要实测，不是靠公式推导出来的。
