clamp()三个参数必须按min、preferred、max顺序且单位可比，否则整条声明被静默丢弃；需反推vw系数并加font-size降级，line-height须用无单位值或统一单位clamp。
直接填对三个参数就能用，但填错一个字（比如单位不统一、顺序颠倒）整条声明就被浏览器忽略。
font-size: clamp() 三个参数必须按 min, preferred, max 顺序写
浏览器不会报错，也不会 fallback，而是静默丢弃整条 font-size 声明——你看到的只是浏览器默认字号（通常是 16px）。常见翻车点：
- 把
preferred写成2em，而min是14px：单位不可比，整条失效 - 误写成
clamp(2rem, 1.5rem, 1rem)：max 小于 min，逻辑矛盾，直接丢弃 - 在 Sass 变量里拼字符串，比如
#{\$min}, #{\$pref}, #{\$max}，结果生成clamp(1rem, 2vw, 2rem )多了个空格——部分旧版 Safari 会拒绝解析
正确写法示例：font-size: clamp(1rem, 2.5vw, 2rem);
preferred 用 vw 时，系数不能瞎套 2%～4%
2.5vw 在 320px 宽度下是 8px，远低于可读下限；而 4vw 在 1920px 下是 76.8px，早超出卡片容器。得反推：
- 先确定最小视口（如 320px）对应最小字号（如 1rem = 16px）
- 再确定最大视口（如 1440px）对应最大字号（如 2rem = 32px）
- 解方程：
x * 320 / 100 = 16→x ≈ 5，但这是起点；更实用的是让增长从 400px 开始：设preferred = calc(1rem + 0.5vw)，既避开小屏过小，又避免大屏突兀
验证方法：拖动浏览器宽度到 320px / 768px / 1440px，在开发者工具 Computed 面板看最终生效的 font-size 值是否落在预期区间内。
旧版 Safari 和安卓 WebView 必须加降级，@supports 不可靠
Safari ≤13.1、iOS 13.3 及更早版本完全不支持 clamp()，且部分构建工具（如 PostCSS autoprefixer 插件）会错误地移除或转译它。别信 @supports (font-size: clamp(0, 0, 0)) —— 它在不支持的环境里根本不会执行，起不到兜底作用。
- 正确降级写法：
font-size: 1.125rem; font-size: clamp(1rem, 2.2vw, 1.5rem); - 避免在
::before、flex子项或transform元素上单独依赖clamp()控制字体，Safari 对这些场景的 vw 解析有延迟 - 如果用了 CSS 自定义属性（
var(--size)），别写clamp(var(--min), var(--pref), var(--max))—— 改为直接写死数值，或用 JS 注入
line-height 不配 clamp 就等于白干
clamp() 只改 font-size，但 line-height 若写死 24px 或 1.5em，小屏下文字会挤成一团，大屏下又空出大片空白。这不是 bug，是设计使然。
- 始终用无单位值：
line-height: 1.4;（它会随font-size等比缩放） - 若必须用
clamp()控制行高（如标题需要更强节奏感），三参数单位也得统一：line-height: clamp(1.2, 1.2 + 0.02vw, 1.6); - 别在
table单元格或固定宽 sidebar 里无脑套4vw——vw按整个视口算，200px 宽侧边栏在 1920px 屏上会渲染出夸张字号
真正麻烦的不是写错语法，而是忘了 vw 不认父容器宽度、忘了系统字体缩放会让 rem 和 vw 行为错位、忘了测试真实设备上的触摸可读性——这些没法靠编译器提醒，只能手动拉窗+真机连测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
