clamp()三参数为下限、首选值、上限，顺序不可颠倒且单位须一致或可合理转换；首选值必须含vw等响应单位以实现平滑过渡，否则字体将“卡死”在边界值。
clamp() 的三个参数到底怎么填
直接说结论：clamp() 里不是“最小值、理想值、最大值”，而是“下限、首选值、上限”——这个顺序不能错，且单位要一致（或至少能被浏览器合理转换）。常见错误是把 rem 和 px 混用，比如 clamp(16px, 1.2rem, 24px)，这会导致计算异常，尤其在缩放或自定义字体设置下失效。
实际推荐写法是统一用 rem 或统一用视口单位：
- 安全做法：用 rem + vw 组合，例如 clamp(1rem, 2.5vw, 1.5rem)，让字体在小屏有底线、中屏弹性伸缩、大屏不无限放大；
- 注意：2.5vw 表示视口宽度的 2.5%，如果根字号是 16px，那它在 375px 宽设备上约等于 9.4px，明显太小——所以必须搭配合理的下限。
- 下限（第一个值）建议设为可读最小值，如
1rem（≈16px） - 首选值（第二个值）用
vw或rem，别用em（会继承父级字号，造成嵌套偏差） - 上限（第三个值）别设太高，
2rem通常够用；超过2.25rem在桌面端可能破坏行高和布局
为什么字体在某些屏幕尺寸上“卡住”不动
这是 clamp() 被误认为“没生效”的最常见现象。根本原因是：中间值（首选值）在某个视口范围内始终落在上下限之间，导致实际渲染值被 clamp 住了——不是函数失效，而是你给的区间太窄。
举例：设了 clamp(1.1rem, 1.3rem, 1.4rem)，那无论屏幕怎么变，它永远显示 1.3rem。真正响应式需要中间值随视口变化，比如 clamp(1rem, 0.8rem + 1.2vw, 1.6rem)，其中 0.8rem + 1.2vw 是线性表达式，浏览器会实时计算。
- 纯数值组合（如
1.2rem）不会响应变化，只起占位作用 - 想实现平滑过渡，中间值必须含至少一个相对单位（
vw、vh、%），且系数要经过测试 - 用开发者工具调
vw值时，建议以 375px（iPhone SE）和 1440px（常见宽屏）为锚点反推系数
与 media query 对比：什么时候该用 clamp()，什么时候该切断点
clamp() 不是 media query 的替代品，而是互补工具。它适合连续变化的属性（如字体、内边距、高度），但不适合需要彻底切换布局结构或隐藏/显示元素的场景。
典型误用：用 clamp() 控制一个卡片的 display 属性——这完全无效，因为 display 不支持插值。
- 优先用
clamp()：字号、行高、padding、max-width（配合min()或max()更稳） - 必须用 media query：改变
flex-direction、切换网格列数、加载不同图片源、禁用某交互 - 混合用法更可靠：先用 media query 切大断点（如移动端/桌面端），再在每个断点内用
clamp()微调字体
兼容性和 fallback 怎么写才不翻车
IE 完全不支持 clamp()，Edge 17+ 支持，Chrome/Firefox/Safari 主流版本都 OK。但“支持”不等于“行为一致”——Safari 15.4 之前对嵌套 clamp() 计算有 bug，Firefox 对含负数的表达式解析更严格。
安全 fallback 不是简单加一行 font-size: 1.2rem 就完事。正确做法是用 CSS 自定义属性 + @supports 隔离：
h1 {
font-size: 1.2rem;
}
@supports (font-size: clamp(1rem, 1.2vw, 1.5rem)) {
h1 {
font-size: clamp(1rem, 2.4vw, 1.5rem);
}
}
- 别在同一个声明块里混写 fallback 和 clamp，老浏览器会忽略整条声明
- 避免在
clamp()里用 calc() 套 calc()，某些旧版 Safari 会崩溃 - 如果项目需支持 IE，用 PostCSS 插件（如
postcss-clamp）转译，但它只能生成 media query fallback，无法真正模拟 clamp 行为
真正麻烦的不是语法，而是设计系统里所有用到字体的地方都要同步考虑缩放临界点——比如按钮文字和标题用同一套 clamp() 公式，但它们的下限和上限理应不同。这点容易漏掉，一改全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
