推荐按设备类型分三级定义CSS变量：--font-size-base-sm、--font-size-base-md、--font-size-base-lg，统一用rem单位；clamp()适合平滑过渡，但响应式字号常需离散跳变，故不宜用于多级阶梯。
怎么用CSS变量定义响应式字号阶梯
直接在 :root 里用媒体查询配合 clamp() 或分段赋值，比写一堆重复的 @media 更干净。关键不是“能不能”，而是变量得按断点分层设计，否则后期改一个字号要翻遍所有媒体查询。
- 推荐按设备类型分三级：手机（
max-width: 480px）、平板（481px - 768px）、桌面（769px+），每级定义独立变量，比如--font-size-base-sm、--font-size-base-md、--font-size-base-lg - 避免把所有字号塞进一个变量里动态计算——
calc()套太多层会难调试，也影响 CSSOM 解析性能 - 字体单位统一用
rem，别混用em或px，否则变量缩放会错位
为什么 clamp() 不适合多级阶梯字号
clamp() 适合平滑过渡，比如标题从 1.2rem 到 2.5rem 线性变化；但响应式排版常需「跳变」——小屏用 14px，中屏突然切到 16px，再大屏才到 18px。这时候 clamp(min, preferred, max) 会把中间段拉成斜线，视觉上反而不稳。
- 真实场景中，设计师给的字号表通常是离散值，不是连续函数
- 浏览器对
clamp()的解析在旧版 Safari（min 和max可能被忽略 - 如果非要用
clamp()，只建议用于单个元素的微调（如按钮文字），别拿它替代断点逻辑
如何让字号变量和组件解耦
别在组件类里硬写 font-size: var(--font-size-h2)，而应通过语义化层级变量间接控制，比如定义 --text-scale 表示当前上下文缩放系数，再用 font-size: calc(var(--font-size-base) * var(--text-scale))。
- 这样改整体字号比例时，只需调
--text-scale，不用动每个组件的 CSS - 组件内部用相对单位（
em或rem）承接变量，避免父级字号变更时子元素失联 - 注意：Sass/Less 编译期变量不能替代运行时 CSS 变量，别指望
$font-base能响应窗口 resize
移动端 viewport 和字体缩放冲突怎么办
iOS Safari 默认会放大过小文字（font-size: 14px，它也可能偷偷加粗+放大。这不是 CSS 变量的问题，是浏览器干预，必须用 -webkit-text-size-adjust 拦住。
立即学习“前端免费学习笔记（深入）”；
- 全局加
html { -webkit-text-size-adjust: 100%; }，否则变量设再准也没用 - 别用
none，它会禁用用户手动缩放，不符合可访问性要求 - Android Chrome 一般不干预，但部分定制 ROM（如华为 EMUI）仍有类似行为，建议真机测试
最麻烦的其实是字体加载期间的 FOIT/FOUT，变量本身不解决这个问题——字号变了，但字体还没载入，临时用系统字体撑开的空间可能和最终不符。得配合 @font-face 的 font-display: swap 和 JS 回调做兜底。
