不能只用 clamp() 做多级字号阶梯，因其是线性插值函数，无法实现设计师要求的离散跳变；且旧版 Safari 不支持，PostCSS 降级会破坏响应逻辑。
为什么不能只用 clamp() 做多级字号阶梯
因为 clamp() 本质是线性插值函数，适合「最小→最大」之间的平滑过渡，但真实响应式排版常需离散跳变：比如小屏标题用 1.5rem，平板切到 2rem，桌面再跳到 2.5rem——中间不该有 1.73rem、1.96rem 这类值。设计师给的字号表是阶梯状的，不是连续函数。
更实际的问题是兼容性：clamp() 在旧版 Safari（iOS 13.7 及更早）完全不识别，且部分 PostCSS 插件会把它静态降级成固定值，反而破坏响应逻辑。
- 别在关键组件（如导航、按钮文字）上依赖
clamp()实现断点切换 - 若必须用，仅限单个元素微调，例如
font-size: clamp(1rem, 2.2vw, 1.3rem)控制按钮文字 - 三个参数单位必须一致：前/后可用
rem或px，中间必须是vw或vh，混用em会导致整个声明失效
怎么用 CSS 变量 + 媒体查询定义三级字号阶梯
核心是把断点逻辑收进 :root，用变量名明确表达设备意图，而不是塞进一个变量里动态计算。推荐分三档：
-
--font-size-base-sm（手机，max-width: 480px） -
--font-size-base-md（平板，481px - 768px） -
--font-size-base-lg（桌面，min-width: 769px）
示例写法：
立即学习“前端免费学习笔记（深入）”；
html {
--font-size-base: var(--font-size-base-sm);
}
@media (min-width: 481px) {
html { --font-size-base: var(--font-size-base-md); }
}
@media (min-width: 769px) {
html { --font-size-base: var(--font-size-base-lg); }
}
:root {
--font-size-base-sm: 14px;
--font-size-base-md: 16px;
--font-size-base-lg: 18px;
}然后组件统一用 font-size: calc(var(--font-size-base) * 1px) ——注意必须乘 1px，否则 var(--font-size-base) 是纯数字，不构成长度单位。
SCSS 函数如何封装字号阶梯避免硬编码
硬写 h1 { font-size: 2.5rem; } 等于把设计逻辑锁死。真正可维护的方式是用 SCSS 函数集中控制缩放节奏，比如：
@function calculate-scale($level, $base: 1.25rem, $ratio: 0.85) {
@return $base * pow($ratio, $level - 1);
}但要注意：pow() 在 Dart Sass
$heading-scales: 1, 0.85, 0.7225, 0.6141, 0.522, 0.4437;
@function get-heading-scale($level) {
@return nth($heading-scales, $level);
}
再配合断点数组生成各尺寸：
- 别在
@for循环里嵌@media，否则每个h1–h6都生成独立媒体查询，CSS 体积暴增 - 应先按断点定义好字号数组，再统一循环输出，保持编译后 CSS 干净
-
$ratio推荐设为0.85：实测h6仍保有可读性；0.8容易让小屏下h6缩到0.6rem以下，边缘模糊
移动端字体缩放冲突怎么防住
iOS Safari 会偷偷放大小于 16px 的文字（哪怕你写了 font-size: 14px），这不是 CSS 变量的问题，是浏览器干预行为。全局加这一行才能兜底：
html { -webkit-text-size-adjust: 100%; }注意：none 会禁用用户手动缩放，违反可访问性要求，必须用 100%。
- Android Chrome 一般不干预，但华为 EMUI、小米 MIUI 等定制系统仍有类似行为，务必真机测试
- viewport 元标签不能少：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则@media在移动端根本不触发 - 字体加载期间的 FOIT/FOUT 问题，变量本身不解决——字号变了，但字体还没载入，临时用系统字体撑开的空间可能错位
