直接用 css 原生 clamp() 即可，sass 仅用于计算比例、避免硬编码；关键在科学设定最小/最大字号及视口范围，并用 vw 线性插值，配合语义化扁平变量管理，而非复杂函数或嵌套 map。
怎么用 Sass 的 clamp() 做字体响应式
直接用 CSS 原生 clamp() 就够了，Sass 在这里只是帮你算比例、避免硬编码。别写一堆 @function 绕来绕去——多数项目根本不需要自定义函数，反而增加维护成本。
常见错误是把 clamp(1rem, 2.5vw, 1.5rem) 直接塞进所有标题，结果小屏字太小、大屏又卡在上限不动。关键不是“能不能用”，而是“比例怎么定”。
- 先确定最小视口（比如
320px）下字号的基准值（如1rem） - 再定最大视口（如
1440px）下的目标字号（如1.75rem） - 中间用
vmin或vw插值，但注意：用vw要换算斜率，公式是(maxSize - minSize) / (maxWidth - minWidth)
示例：从 320px 的 1rem 到 1440px 的 1.75rem，斜率 = (1.75 - 1) / (1440 - 320) ≈ 0.00067，所以写成 clamp(1rem, 0.67vw, 1.75rem)（实际用 0.67vw 而非 0.00067 * 100vw 更直观）
Sass 变量 + clamp() 怎么组织才不混乱
把视口断点和字号映射写死在变量里，比每次手算强。但别搞成二维 map 套嵌——读起来像解谜，改一个值要翻三处。
推荐用扁平变量对：$font-size-h1-min: 1rem、$font-size-h1-max: 1.75rem、$font-size-h1-min-width: 320px、$font-size-h1-max-width: 1440px。需要时用一行计算：clamp(#{$font-size-h1-min}, #{slope($font-size-h1-min, $font-size-h1-max, $font-size-h1-min-width, $font-size-h1-max-width)}vw, #{$font-size-h1-max})
-
slope()是个极简函数，只做除法，不封装逻辑，不处理单位转换 - 所有变量名带语义前缀（如
h1），避免$base-font-size这种模糊命名 - 不为每个标题写独立 mixin，容易导致样式表膨胀；统一用 class 名驱动，比如
.text-display-1
为什么不用 em 或 rem 配媒体查询替代 clamp()
因为要响应“连续变化”，不是“阶梯切换”。媒体查询在 767.98px 和 768px 之间会突变，而用户缩放页面、横竖屏切换、甚至 Chrome 的“自定义缩放”都会让断点失效。
clamp() 是浏览器原生插值，性能好、无 JS 依赖、兼容性现在也够（Chrome 88+，Firefox 79+，Safari 13.4+）。真正要操心的是旧 Safari 对 vmin 支持不稳定，所以优先用 vw，慎用 vmin。
- IE 完全不支持，但如果你还在考虑 IE，那响应式字体本身就不该是优先项
- 安卓 WebView 旧版本（
Android 9以下）可能解析clamp()异常，建议加降级：font-size: 1.25rem; font-size: clamp(...) - 别在
@keyframes里用clamp()，部分浏览器动画帧中不重算
字体比例失调的真实信号：不是代码问题，是设计系统没对齐
当你发现调了半天 clamp() 参数，标题还是看着“挤”或“飘”，大概率不是 Sass 写错了，而是视觉层级没定义清楚：比如 h1 和 h2 的字号比本该是 1.618（黄金比），结果你设成了 1.5，再怎么响应式也救不回节奏感。
真正该花时间的地方，是和设计师对齐一套字号标尺（type scale），然后用 Sass 把它转成可复用的 clamp() 表达式。否则，所有“优化”都是在补漏洞。
比例一旦定死，后续改起来就很简单——只动几个变量，全站字号自动重算。怕的是一边调 Sass 函数，一边设计师又发来新 Figma，字号全变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
