clamp()三参数为min、preferred、max，需单位一致：min和max用rem/px保底线与上限，preferred用vw/vh等视口单位并经断点测试确保其在min/max间浮动，否则失效。
Clamp函数的三个参数到底怎么配？
clamp() 的核心是给定一个最小值、首选值和最大值，浏览器会在三者间动态插值。但很多人直接套用 clamp(1rem, 2.5vw, 2rem) 发现字体在小屏上反而比预期大——问题出在「首选值」选错了。它不是“理想大小”，而是「视口缩放基准点」，必须和最小/最大值单位协调。
- 最小值（下限）建议用固定单位（如
1rem），确保极小屏可读 - 最大值（上限）也建议固定单位（如
2.25rem），防止大屏溢出容器 - 首选值推荐用视口单位（
4vw或2.8vh），但数值要经过测试：比如4vw在 375px 屏上 ≈ 15px，刚好落在1rem（16px）和2.25rem（36px）之间；若设成6vw，在 414px 屏就已达 24.8px，很快触达上限，失去中间弹性
为什么在Flex或Grid容器里字体突然不缩放了？
这不是 clamp() 失效，而是父容器限制了子元素的可用空间。典型场景：一个 display: flex 的导航栏，子项设置了 flex: 0 0 auto，此时文本宽度被父容器挤压，视口单位（vw）仍按整个视口计算，但实际渲染区域远小于视口——字体看起来“卡死”在某个尺寸。
- 检查父容器是否设置了
min-width、max-width或overflow: hidden - 若用
vw，确保该元素的布局上下文未被 transform、fixed 定位或嵌套滚动容器干扰 - 更稳妥的做法是改用
clamp(1rem, 2.5cqw, 2.25rem)（cqw是容器宽度单位），前提是父容器有明确 width（非fit-content）
Clamp配合line-height时常见错位问题
字体大小动态变化，但 line-height 若写死（如 line-height: 1.4），会导致小屏时行高过紧、大屏时行高松散。更糟的是设成 line-height: 1.4em——em 会随 font-size 变化，但起始基线可能偏移。
- 直接用无单位数值（
line-height: 1.4）最安全，它是相对于当前 font-size 的倍数，天然适配clamp() - 避免
line-height: 20px这类绝对单位，它不会随clamp()动态调整 - 若需精确控制基线，可搭配
font-size-adjust或重置margin，但多数场景没必要
Clamp在旧浏览器里 fallback 怎么写才不白忙？
clamp() 在 Safari 13.1+、Chrome 79+、Firefox 75+ 支持良好，但 IE 全系、旧 Edge 和部分安卓 WebView 会直接忽略整条声明。只写一行 font-size: clamp(...) 会导致这些环境回退到浏览器默认大小（通常 16px），非常不可控。
- 必须前置降级声明：
font-size: 1.25rem;再跟font-size: clamp(...);，CSS 解析器会覆盖前一条 - 不要用
@supports (font-size: clamp(...))包裹——部分旧浏览器虽不支持 clamp，却能解析该语法并错误进入规则块 - 真正需要兼容 IE 的项目，建议用 JavaScript 动态计算 +
style.fontSize设置，而不是强求纯 CSS 方案
Clamp 的弹性本质是「在约束内自由流动」，不是万能缩放开关。真正难的不是写出那行代码，而是判断哪里该设硬边界、哪里该留呼吸空间、以及当它不动时，先怀疑布局容器而不是函数本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
