Sass 本身不提供响应式字号函数，仅通过变量和 calc() 辅助生成正确 clamp()；需统一单位、避免 em 嵌套漂移、用 dvw 应对真机 vw 偏差，并以真机校验为准。
怎么用 Sass 的 clamp() 做响应式字号
直接用 CSS 原生 clamp() 就够了，Sass 本身不提供额外的响应式字号函数——它只是帮你把重复计算抽出来，避免手算 min/max 值出错。
常见错误是把 clamp(1rem, 2.5vw, 1.5rem) 写成固定值组合，结果在小屏上字号突变、大屏上停止增长。真正要的是「随视口平滑过渡」，不是硬切。
-
clamp()三个参数必须单位一致（如都用rem或都转成vw），混用rem和vw是合法的，但得确保中间值在目标区间内可插值 - 推荐用 Sass 变量存基准：
$base-font-size: 1rem;、$min-vw: 320px;、$max-vw: 1440px;，再用calc()算斜率，避免魔法数字 - 别在
@media里套clamp()——它本就是媒体查询的替代方案，叠加反而让逻辑变重
Sass 函数封装比例字号时要注意什么
有人写 font-scale($ratio) 返回 1rem * $ratio，这只能做静态缩放，不是响应式。真有用的封装，得把视口范围、基准字号、缩放比例全塞进去。
典型场景是标题层级：h1 比正文大 1.8 倍，且需在 320px–1440px 间线性放大。这时不能只靠乘法，得用视口单位动态调。
立即学习“前端免费学习笔记（深入）”；
- 函数输入应包含：最小视口宽、最大视口宽、最小字号、最大字号、当前视口单位（如
vw） - 输出必须是
clamp()字符串，且中间值用calc()算出，例如：calc(#{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-vw}) / (#{$max-vw} - #{$min-vw}))) - 注意 Sass 3.5+ 才支持
calc()内联计算；旧版本得用字符串拼接，容易漏空格或括号
为什么 em 和 rem 在 clamp() 里表现不同
rem 相对根字体，稳定；em 相对父元素，嵌套深了会指数级放大。用在 clamp() 里，em 的中间值会随上下文漂移，失去响应预期。
比如父元素 font-size: 1.2em，子元素写 font-size: clamp(1em, 2.5vw, 2em)，实际最小值是父的 1.2em，不是你写的 1em。
- 所有
clamp()中的单位尽量统一用rem或vw，避免混合em和rem - 如果必须用
em（如组件库需继承上下文），中间值改用vw，首尾用em，但得测试多层嵌套是否溢出 - Chrome 100+ 开始支持
clamp()内使用lh（行高单位），但 Safari 仍不支持，别依赖
移动端真机调试时 vw 值不准怎么办
iOS Safari 和部分安卓 WebView 会把地址栏高度算进视口，导致 100vw 实际小于屏幕宽度，clamp() 中间值偏小，字号看起来“没长大”。
这不是 Sass 的锅，是运行时环境问题。解决思路不是换方案，而是微调基准。
- 用
100dvw替代100vw（dynamic viewport），Chrome 102+、Safari 16.4+ 支持，它排除滚动条和地址栏干扰 - 兼容老版本？把
max-vw设为90vw起步，再根据真机实测回调，比如 iPhone 14 Pro Max 实测常用93.5vw更准 - 别用
window.innerWidthJS 动态设 CSS 变量——重排开销大，且首次渲染仍走默认vw
比例计算本身不难，难的是每个设备、每个浏览器对「视口」的定义有微妙差异。别指望一套 clamp() 参数通吃，留个真机校验环节比写十个 Sass 函数都管用。
