clamp() 是带边界的线性插值函数，三参数须满足 min ≤ preferred ≤ max，否则整条声明被浏览器静态废弃；单位须统一，优先用 vmin 适配多端，需双声明降级并校准视口系数。
clamp() 不是“自动适配”，而是带边界的线性插值计算；写错顺序、混用单位、忽略视口基准，字体就失效或跳变。
clamp() 三个参数必须满足 min ≤ preferred ≤ max，否则整条声明被浏览器丢弃
浏览器解析 clamp() 时会做静态校验：若 preferred 在逻辑上可能超出 min 或 max（比如 clamp(16px, 4vw, 12px)），直接跳过该行样式。这不是运行时判断，而是声明阶段就废弃。
- 常见翻车点：把设计稿标注的“20px”直接当
preferred写成clamp(14px, 20px, 24px)—— 这根本没响应性，只是个固定三值比较 - 正确做法：先换算基准，例如设计稿宽 375px、字号 20px → 20 ÷ 375 ≈ 0.0533，即
5.33vw，再结合上下限反推合理区间 - 单位必须统一：不要写
clamp(1rem, 2vw, 2.5rem)，rem和vw基准不同，比较无意义；要么全用px，要么全用rem（前提是根字体稳定）
移动端优先用 vmin 而非 vw，尤其图文叠加或横竖屏频繁切换场景
单纯用 vw 在 iPad 横屏（1024×768）下是 8vw = 81.92px，竖屏（768×1024）下只剩 61.44px，同一设备旋转后字号突变。而 vmin 取宽高较小者，保证视觉比例一致。
- 标题覆盖在 banner 图上？用
font-size: clamp(1.25rem, 8vmin, 4rem)比8vw更稳 - 正文段落一般不用
vmin，因为高度变化对阅读影响小，vw更符合“按宽度缩放”的直觉 - 避免在
@media查询内嵌套clamp()，Safari 对嵌套函数解析更脆弱，容易不生效
必须加降级 fallback，且 @supports 写法要严格
iOS 13.0、Android 4.4 等旧环境完全不支持 clamp()，且无 polyfill 可补。只靠 @supports (font-size: clamp(0, 0, 0)) 不够——某些旧 Safari 会识别语法但计算错误。
- 安全写法是双声明 + 显式
@supports：先写font-size: 16px，再写@supports (font-size: clamp(1rem, 1.5vw, 1.2rem)) { font-size: clamp(1rem, 1.5vw, 1.2rem); } - 别把
clamp()用于布局关键尺寸（如height、grid-template-rows），老浏览器丢弃后可能直接崩 UI - 如果项目用了
postcss-pxtorem，clamp()中混用px和rem会导致单位转换冲突，建议统一用px或关闭该插件对clamp()所在 CSS 的处理
小屏文字过小、横竖屏跳变、Safari 不缩放——这些都不是 clamp() 的 bug，而是 viewport 或系数没调准
iPhone SE（375px）上 4vw = 15px，若 min 设为 16px，那永远卡死在下限；若设成 14px，又可能触发 iOS 最小可读限制（14px 是硬门槛），导致渲染模糊。
- 实测系数比拍脑袋靠谱：从
2vw起步，在 320px–1200px 视口范围预览是否自然；标题常用4vmin–6vmin，正文用3vmin–4vmin - Safari 字体不动？先检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否缺失或被 JS 覆盖 - 字体抖动？加
will-change: font-size治标不治本，更有效的是改用calc(1rem + 0.3vw)降低变化斜率，或限制作用范围（只给h1、.hero-title这类明确需要响应的元素）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
