推荐用 clamp(1rem, 4vw, 1.5rem) 实现响应式字体，需配合 @supports 降级、禁用动态根字体以避免基准错位，并通过 devtools 验证最终计算值。
用 clamp() 替代传统 px/em 混合计算
纯 sass 的 px 到 rem 转换宏没法响应视口变化，硬写媒体查询又冗余。现代方案直接交给 css 原生 clamp()，Sass 只负责生成合理区间值。
常见错误是把 min 和 max 设成固定像素（比如 clamp(16px, 2vw, 24px)），结果在小屏上字体突然跳变——因为 2vw 在 320px 宽度下只有 6.4px，远低于可读下限。
-
clamp()三个参数必须同单位或都用相对单位，16px、4vw、24px是安全组合（最小保底、中间弹性、最大封顶） - 推荐用
rem写min/max，避免根字体缩放时失效：例如clamp(1rem, 4vw, 1.5rem) - 注意 safari 13.1+ 才完整支持
clamp()，旧版本需降级 fallback（见下一条）
Sass 混合宏里加 @supports 降级逻辑
不加降级的 clamp() 在 ios 12 或 chrome 80 以下会直接忽略整条声明，字体退回默认大小，用户感知就是“字号没生效”。
混合宏不能只输出一行 font-size，得包裹 @supports 块，并在里面补一层静态 rem 值作为兜底。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
@mixin responsive-font($min: 1rem, $max: 1.5rem, $viewport-unit: 4vw) { font-size: $min; @supports (font-size: clamp(1rem, 1vw, 1rem)) { font-size: clamp($min, $viewport-unit, $max); } } -
@supports条件里必须用真实能被识别的语法，不能写变量，所以固定写clamp(1rem, 1vw, 1rem)即可触发检测 - 别在
@supports外再套媒体查询——既重复又增加编译体积
避免在 rem 基准变动时破坏 clamp() 行为
如果项目用了动态根字体（比如 js 根据 dpr 设置 html 的 font-size），clamp(1rem, 4vw, 1.5rem) 的实际表现会和预期偏差：1rem 不再是 16px，而 4vw 仍按视口宽度算，两者基准不一致。
这时候 clamp() 就不是“自适应”，而是“错位适应”。尤其在横竖屏切换、缩放页面时容易出现字号抖动。
- 最稳做法：禁用 JS 动态改根字体，统一用
html { font-size: 100% }，靠浏览器默认 16px 基准 - 若必须动态改根字体，
clamp()的min/max改用px单位（如clamp(16px, 4vw, 24px)），确保绝对控制 - 别混用
rem和em：比如clamp(1rem, 2em, 1.2rem)会因父元素字体变化彻底失控
调试时优先检查计算后的最终 CSS 值
开发者工具里看到 font-size: clamp(...) 并不等于它真在生效——可能被更高优先级规则覆盖，也可能被 @supports 屏蔽后退到了 fallback 值。
容易被忽略的是：Sass 编译后生成的 CSS 里，clamp() 如果参数含变量或函数调用（比如 clamp(map-get($sizes, sm), 3vw, map-get($sizes, lg))），Sass 会报错或静默失败，最终输出空值。
- 打开浏览器 DevTools 的 Computed 面板，直接看
font-size计算结果，而不是 Elements 面板里的原始声明 - 在 Sass 中用
@debug打印混合宏入参，确认传入的是数值而非NULL或未定义变量 - 移动端真机调试时，注意 Safari 的「显示开发菜单」需手动开启，否则看不到
clamp()是否被解析
实际用下来，最麻烦的不是写宏，而是确认所有终端环境里 clamp() 的三个参数始终落在可读区间内——这个得靠设计系统定死上下限，不能全丢给 Sass 算。