响应式字号不能只靠vw，因缺乏最小/最大限制会导致小屏过小、大屏过大；应使用clamp()在合理区间内线性缩放，如clamp(16px, 4vw + 12px, 32px)，并联动调整line-height与font-weight。
响应式字号为什么不能只靠 vw
直接用 vw 单位（比如 font-size: 4vw）确实能随视口缩放，但实际项目里很快会出问题：小屏下字号可能小到看不清，大屏下又撑爆容器，且无法控制最小/最大边界。浏览器不会自动帮你做“别太小、也别太大”的判断——这得你来定规则。
真正可控的响应式字号，核心是「在合理区间内按比例缩放」，而不是无约束地跟随视口变化。
- 常见错误现象：
font-size: 5vw在 iPhone 上变成12px，阅读困难；在 4K 屏上飙到80px，破坏行高和布局 - 使用场景：标题（
h1～h6）、卡片主文案、移动端优先的运营页正文 - 关键限制：必须设定
min-font-size和max-font-size，否则就是把控制权交给了设备宽度
Sass 中用 clamp() 实现安全缩放
CSS 原生 clamp() 是目前最简洁可靠的方案，Sass 可以直接输出它，无需运行时计算。重点不是“怎么写函数”，而是“怎么设三个值才合理”。
公式是 clamp(min, preferred, max)，其中 preferred 通常用 vw 表达线性关系，但要换算成有意义的基准。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
font-size: clamp(16px, 4vw + 12px, 32px)—— 这表示：最小 16px，最大 32px，中间段按视口宽度线性插值（4vw 是斜率，12px 是截距） - 斜率怎么定？用两个参考点反推：比如希望在 375px 宽度时显示 18px，在 1440px 时显示 30px，解方程得斜率 ≈
0.0097，即0.97vw，再微调为1vw更易读 - 兼容性注意：IE 不支持
clamp()，如需兼容，得 fallback 到媒体查询 +rem，但现代项目基本可忽略 IE
自定义 Sass 函数 responsive-font() 的实用封装
手动写 clamp() 容易漏参数或算错截距，封装一个函数能统一逻辑、减少重复。但它不是万能的——函数本身不解决设计决策问题，只是把数学逻辑收口。
示例函数定义（Sass）：
@function responsive-font($min: 16px, $max: 32px, $base-width: 375px, $scale: 1) {
$slope: ($max - $min) / ($base-width / 100);
$intercept: $min - $slope * ($base-width / 100);
@return clamp(#{$min}, #{$slope} * 1vw + #{$intercept}, #{$max});
}- 调用方式：
font-size: responsive-font(18px, 36px, 375px, 1.2)，其中$scale用于微调响应灵敏度 - 容易踩的坑：单位混用（比如
$min传1.125rem，但$intercept计算时没转成 px），建议函数内部统一用px运算，返回前再转 - 性能影响：Sass 编译期计算，零运行时开销；但别在循环里反复调用复杂函数，编译会慢
字体缩放与行高、字重的联动处理
字号变了，line-height 和 font-weight 往往也要跟着调，否则小屏下文字挤在一起，大屏下又显得单薄。这不是“顺带优化”，而是排版一致性刚需。
- 行高建议用无单位值（如
1.4），它会随字号等比缩放；避免写24px这类固定值 - 字重可以配合
@media做轻量级调整：小屏用font-weight: 500提升可读性，大屏用600或700增强视觉重量 - 特别注意：某些中文字体（如「思源黑体」）在极小字号（min-font-size，也不强行缩放
真正难的不是写出 clamp()，而是确定那三个数字背后的设计意图：这个标题在折叠屏上最小该多大？用户真的需要它在 27 寸显示器上占满半屏吗？这些没法交给函数算出来。
