clamp(16px, 4vw, 24px)在小屏无变化，因4vw在375px时仅15px＜min（16px），浏览器直接取min；仅当视口宽400–600px时preferred才生效，区间过窄导致无缩放感。
font-size: clamp() 为什么在小屏上没变化
写了 clamp(16px, 4vw, 24px) 却发现 iPhone 上字体始终是 16px，不是 clamp 失效，而是中间值根本没进入生效区间。浏览器只在「min ≤ preferred ≤ max」成立时才插值计算；否则直接取边界值。
实操建议：
- 先反推生效宽度：16px ÷ 4vw = 400px → 小于 400px 宽度时永远取 16px
- 24px ÷ 4vw = 600px → 大于 600px 时永远取 24px
- 真正线性缩放只发生在 400–600px 区间，窄得几乎不可见
- 想让 375px 显示 18px、1440px 显示 22px，应改用
clamp(1.125rem, 0.375vw + 0.24rem, 1.375rem)
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）始终卡在最小值，通常不是兼容性问题，而是解析时机或写法陷阱。
实操建议：
- 必须有
<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，这样能保持字间距与字号比例稳定 - 避免
line-height: 24px或letter-spacing: 2px这类绝对单位，它们会破坏响应一致性
clamp()，是算准三个参数在真实设备上的落点——320px、768px、1440px、1920px 下的最终像素值，都得手动验证一遍。系统字体放大、横竖屏切换、地址栏收起这些变量，全靠真机测，模拟器不够用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
