直接用font-size: 5vw会导致小屏过小、大屏过大，因vw无上下限约束；应使用clamp(最小值, 建议值, 最大值)实现安全响应式缩放，兼顾可读性与显示效果。
vw 字体缩放为什么不能直接用 font-size: 5vw
直接写 font-size: 5vw 看似简单，但实际在小屏（如 iPhone SE）上会缩得太小，大屏（4K 显示器）又可能过大，导致可读性崩坏。视口单位本身没有下限或上限约束，5vw 在 320px 宽屏幕上只有 16px，在 3840px 屏上却达 192px——这显然不是“响应式”，而是“失控式”。
真正可用的方案必须引入人为干预点：一个最小字号兜底，一个最大字号封顶，中间用线性插值过渡。
用 clamp() 实现带阈值的 vw 缩放（推荐）
clamp() 是目前最简洁、语义最清晰的解法，原生支持三参数：clamp(最小值, 建议值, 最大值)，浏览器自动做截断。Sass 中可封装为函数复用：
@function responsive-font($min: 16px, $max: 24px, $vw-base: 5vw, $breakpoint-min: 320px, $breakpoint-max: 1920px) {
$slope: ($max - $min) / ($breakpoint-max - $breakpoint-min);
$offset: $min - $slope * $breakpoint-min;
@return clamp(#{$min}, #{$offset} + #{$slope} * 100vw, #{$max});
}
调用示例：
h1 {
font-size: responsive-font(20px, 42px, 8vw, 375px, 1440px);
}
生成结果（CSS）：
h1 {
font-size: clamp(20px, 6.25px + 6.9444vw, 42px);
}
这个公式保证：375px 宽时刚好 20px，1440px 宽时刚好 42px，中间严格线性过渡。
- 注意
$breakpoint-min和$breakpoint-max必须是真实设备常见宽度，不是媒体查询断点 - 计算中所有单位需统一（建议全用 px），否则 Sass 会报错
"Incompatible units px and vw" - 生成的
clamp()在 Safari 13.1+、Chrome 88+、Firefox 79+ 可用；旧浏览器会回退到第一个值（min），所以兜底合理很关键
不支持 clamp() 时的降级方案：媒体查询 + calc()
若项目需兼容 IE 或老版 Safari，就得手动分段。常见做法是设两个断点，三段线性：
h1 {
font-size: 20px; /* fallback */
}
<p>@media (min-width: 375px) {
h1 {
font-size: calc(20px + 6.9444vw - 2.6042px); /<em> 375px → 20px </em>/
}
}</p><p>@media (min-width: 1440px) {
h1 {
font-size: 42px; /<em> cap </em>/
}
}</p>
其中 6.9444vw - 2.6042px 来自斜率推导（(42-20)/(1440-375) ≈ 0.0206，再换算成 vw 单位）。
- calc() 里不能混用
vw和px直接加减，必须把 px 常量也转成相对单位，例如2.6042px = 0.6944vw @ 375px，所以要反向凑数 - 每段 media query 的边界值必须和
clamp()版本完全一致，否则视觉跳变 - 维护成本高：改一个阈值就要同步更新三处（变量、小屏 calc、大屏固定值）
Sass 编译后字体值为何有时变成小数或科学计数？
Sass 默认保留浮点精度，比如 1/1440 算出来是 0.0006944444444444445，最终 CSS 里出现 0.00069444vw 这种不可读的值。这不是 bug，但影响调试和协作。
- 用
round($value * 10000) / 10000手动截断到小数点后 4 位 - 更稳妥的是用
str-slice()截字符串，但仅限 Dart Sass 1.40+ - 真正该警惕的是：如果算出负的 offset（比如
$min太大或$breakpoint-min太小），clamp()会失效，浏览器按min渲染——这种逻辑错误不会报错，只能靠人工校验边界值
公式本身很干净，但阈值选得是否贴合真实阅读场景，比怎么写代码更重要。比如正文行高、字重、行宽都影响可读临界点，这些没法靠数学自动推导。
