clamp()实现平滑响应式排版需三参数逻辑自洽、单位统一、边界合理，否则小屏字更小、大屏锁死、窄容器文字爆炸；vw按视口宽计算，侧边栏等窄区域应优先用rem/em+媒体查询或@container查询兜底。
clamp() 能实现平滑响应式排版，但前提是三个参数逻辑自洽、单位统一、边界合理——否则小屏字更小、大屏锁死、窄容器里文字爆炸。
为什么 clamp() 在 sidebar 或卡片标题里字体特别大
因为 vw 永远按整个视口宽度计算，不是按父容器。一个 200px 宽的侧边栏写 font-size: 4vw，在 1920px 屏幕上就是 76.8px，远超预期。
- 窄区域（导航、弹窗按钮、table 单元格）优先改用
rem或em+ 媒体查询兜底，例如：font-size: clamp(0.875rem, 1.2rem, 1.125rem) - 若坚持流体感，配合
@container查询（需 Chrome 105+/Safari 16.4+）：@container (width > 300px) { h3 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); } } - 务必实测真实渲染宽度：拉伸浏览器到 320px/768px/1440px，用开发者工具的 Computed 面板查最终生效的
font-size值
clamp() 三个参数怎么填才不翻车
它不是“取中间”，而是“在 min 和 max 之间线性插值”，插值依据是视口宽度。填错就会小屏反小、大屏不动。
- 确保
min ≤ preferred ≤ max在所有目标设备上成立——比如clamp(14px, 1rem, 18px)中，若用户系统字号设为 20px，则1rem = 20px > 18px，结果永远取18px，失去响应意义 - 推荐组合：全用
px（最可控），或全用rem（适配系统字号）；避免混用，如clamp(14px, 2.5vw, 1.5rem) - 常见安全起手式：
font-size: clamp(1rem, 2.5vw + 0.5rem, 2.25rem)，前提是html { font-size: 16px }
旧版 Safari 和微信 X5 内核怎么降级
clamp() 在 Safari ≤14.1、iOS 13.3 及更早、部分安卓 WebView 中会被整条忽略，退回到浏览器默认字号，不是 fallback 而是彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 必须写两行，靠 CSS 级联自然降级：
font-size: 1.5rem; font-size: clamp(1.125rem, 2.5vw, 2rem); - 不要用
@supports (font-size: clamp(0, 0, 0))包裹——不支持的环境会跳过整个规则块，连第一行都无效 -
-webkit-clamp()不存在，PostCSS 插件也加不出前缀，务实做法就是静态值打底 + 关键断点用媒体查询微调
真正难的不是写对 clamp()，而是在不同设备上验证 preferred 的计算值是否始终落在 min/max 区间内——这个验证步骤，90% 的人跳过了。
