clamp() 的三个参数须为“最小值、弹性锚点（相对单位）、最大值”，中间值必须用 vw/rem 等相对单位才能实现响应式缩放，否则失效。
clamp() 的三个参数到底怎么填才不翻车
直接说结论：clamp() 不是“设个最小值和最大值就完事”，中间那个“首选值”必须是相对单位（比如 rem 或 vw），否则在多数设备上会失效——浏览器会把它当固定值处理，失去响应性。
常见错误现象：文字在小屏没缩，大屏反而撑爆容器，或者干脆完全不随视口变化。
-
clamp(1rem, 2rem, 3rem)❌ 全是绝对单位，等价于固定显示2rem -
clamp(1rem, 4vw, 3rem)✅4vw是弹性锚点，浏览器据此插值 - 移动端优先场景建议用
clamp(1rem, 2.5vw + 0.5rem, 1.5rem)，加计算式能更平滑过渡
为什么用 clamp() 而不是 media query
本质区别在于：媒体查询是离散断点，clamp() 是连续插值。你改一个值，它就在整个区间里线性过渡，不用反复写 @media 块。
但代价是控制粒度变粗——你没法在某个特定宽度突然加粗或换行，只能靠函数表达式逼近。
立即学习“前端免费学习笔记（深入）”；
- 性能更好：CSS 引擎原生支持，无 JS 开销，无重排触发
- 兼容性注意：IE 完全不支持，
Edge 16+、Chrome 79+、Safari 13.1+才稳定 - 如果项目需兼容 IE，别硬套
clamp()，老实用@media+font-size降级
和 viewport 单位混用时的坑
vw 看似方便，但实际滚动条宽度会影响视口计算——尤其在桌面端，100vw 可能比可视区宽 15px，导致文字缩放基准偏移。
更稳的做法是把 vw 和根字体挂钩，用 rem 锚定设计系统尺度。
- 避免单独用
clamp(16px, 4vw, 24px)，小屏下4vw可能小于16px，文字过小难读 - 推荐写法：
clamp(1rem, 1.2rem + 1.5vw, 1.5rem)，用rem打底，vw只负责微调 - 如果用了
viewport-fit=cover（iOS 拖动时隐藏地址栏），vh/vw会跳变，此时应避免纯vw驱动字号
line-height 怎么跟着 clamp() 一起动
字号变了，行高不跟，文字会挤或飘。但 line-height 不支持 clamp() 直接套用（CSS 规范限制），得绕一下。
最简方案是用 em 单位，让行高自动随字号缩放；复杂点可用 calc() 搭配变量。
-
font-size: clamp(1rem, 2.5vw, 1.5rem); line-height: 1.4;✅1.4是无单位数值，按当前字号倍数算 - 想精确控制像素级行高？可以：
--lh: clamp(1.2, 0.02vw + 1.3, 1.5); line-height: var(--lh); - 千万别写
line-height: clamp(1.2em, 1.4em, 1.5em)❌em在这里会被解析成绝对值，失去响应性
真正麻烦的是多行标题的垂直居中或截断，这时候 clamp() 只管字号，还得配合 max-lines 或 line-clamp 组合使用——那又是另一层计算了。
