clamp()在小屏无变化是因为首选值未落入min/max区间，如clamp(1rem, 2.5vw, 2rem)在375px时2.5vw≈9.4px＜16px，浏览器直接取min；应改用calc()添加基准偏移，如clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem)，确保首选值在合理区间内浮动。
font-size: clamp() 为什么在小屏上没变化
因为首选值（第二个参数）没真正“动起来”。比如 clamp(1rem, 2.5vw, 2rem) 在 375px 屏上算出来是 9.4px，远低于 1rem（16px），浏览器直接取最小值，字体就卡死不动——这不是 bug，是 clamp() 的设计逻辑：它只在首选值落在 min/max 之间时才插值。
要让它动，得让首选值在某个视口宽度下刚好等于 min，在另一个宽度下逼近 max。推荐用 calc() 拆解线性表达式：clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem)。其中 0.8rem 是基底，1.2vw 是斜率，能提前启动缩放，避免小屏段长时间锁死。
- 别写
clamp(16px, 20px, 24px)——首选值固定，永远不响应 - 别依赖
em在首选值里，它会继承父级font-size，嵌套时结果不可控 - 实测关键点：拉浏览器到 320px、768px、1440px，看 computed 样式里的像素值是否平滑过渡
clamp() 三个参数单位怎么配才不报错
min 和 max 必须是长度单位（rem、px、em），不能是纯数字或 vw；首选值可含计算，但所有参与运算的单位必须兼容（rem + vw 合法，em + vw 易因继承链断裂失效）。
混用单位最常见后果是整条声明被浏览器静默忽略——尤其在旧 Safari 或安卓 WebView 里，你连 warning 都看不到。
- 全用
px最稳妥：clamp(16px, calc(12px + 0.375vw), 24px) - 全用
rem更适配系统字号放大：clamp(1rem, calc(0.75rem + 0.375vw), 1.5rem) - 绝对不要写
clamp(1rem, 2.5vh, 2rem)——字体不该随滚动高度变化
为什么父容器里 font-size: clamp() 失效了
不是 clamp() 失效，而是 vw 基准是整个视口宽度，不是父容器。一个 200px 宽的侧边栏里写 font-size: 4vw，在 1920px 屏幕上就是 76.8px，明显失真。
典型失效场景包括：display: flex 子项被 flex: 0 0 auto 限制、transform 或 position: fixed 改变了布局上下文、容器本身是 fit-content 或受 max-width 压缩。
- 检查父容器是否设置了
min-width、max-width或overflow: hidden - 若需按容器宽度缩放，改用
cqw（容器宽度单位）：clamp(1rem, 2.5cqw, 1.5rem)，前提是父容器有明确width - 窄区域（如导航菜单、弹窗按钮）更稳妥的做法是放弃
vw，改用rem+ 媒体查询兜底
旧浏览器 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(0, 0, 0))包裹——很多构建工具（如 PostCSS 插件）会把它编译掉或转成静态值，反而破坏响应逻辑 - 别指望
text-size-adjust: 100%能补救clamp()失效，它只防系统双倍缩放，不解决函数不识别问题 - 移动端 iOS Safari 在「显示与文字大小」调大时，
vw计算不受影响，但用户实际看到的字可能糊或挤——这时clamp()的min值必须 ≥14px 才算真正守住可读底线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
