<p>clamp() 不支持在首尾参数中使用 CSS 变量，因其需静态长度值；正确做法是用 calc() 将变量作为比例因子乘到 clamp() 外部，如 calc(var(--scale-base) * clamp(1rem, 4vw, 1.5rem))。</p>
为什么直接用 font-size: clamp() 不能解决全局缩放问题
因为 clamp() 本身是计算值，不支持在 :root 中直接用变量做上下限——比如写 clamp(var(--min), 1rem, var(--max)) 会报错：CSS 不允许在 clamp() 的第一个或第三个参数里动态解析变量。浏览器解析时，clamp() 要求三个参数都是确定的长度值（如 1rem、24px），而 var(--x) 在函数内部无法被提前求值。
正确做法：把变量放在 clamp() 外层，用 calc 配合单位转换
核心思路是让变量控制比例因子，再用 calc() 把它乘进 clamp() 的每个参数中。这样变量只参与乘法运算，不破坏 clamp 对静态值的要求。
-
--scale-base: 1;作为基准缩放系数（可由 JS 或媒体查询动态改） - 所有字体大小统一写成
calc(var(--scale-base) * clamp(1rem, 4vw, 1.5rem)) - 注意：
clamp()内部必须用具体值，外部用calc()套一层实现“缩放”
html
:root {
--scale-base: 1;
--font-base: clamp(1rem, 4vw, 1.5rem);
}
h1 { font-size: calc(var(--scale-base) * var(--font-base)); }
p { font-size: calc(var(--scale-base) * 0.875 * var(--font-base)); }
JS 动态切换时，为什么只改一个变量就能全局响应
因为所有字体都依赖 var(--scale-base)，只要它一变，所有 calc() 表达式立刻重计算。但要注意：
- 不要用
document.documentElement.style.setProperty('--scale-base', '1.2')直接设字符串，必须带单位？错——--scale-base是无单位数值，设'1.2'即可 - 若配合 prefers-reduced-motion 或用户字号偏好，建议监听
mediaQueryList而非轮询matchMedia - SSR 场景下，首次渲染时 JS 还没执行，需在 HTML head 中预设
<style>:root{--scale-base:1.1}</style>避免闪动
移动端适配中容易忽略的 viewport 与缩放冲突
当用户手动缩放页面（双指放大），vw 单位会随视口物理宽度变化，但 clamp() 里的 4vw 仍按原始视口算——导致字体实际变小。这不是 CSS 变量的问题，而是 viewport 设置不当：
立即学习“前端免费学习笔记（深入）”；
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">中user-scalable=yes保留（否则禁缩放，clamp 失去意义） - 如果业务强制禁止缩放，那
clamp()的响应式意义就只剩横屏/竖屏切换，此时应改用min(max(...))+ 媒体查询兜底 - 测试时用真机双指缩放，别只靠 Chrome DevTools 的「device toolbar」模拟——后者不触发真实
vw重计算
实际最麻烦的不是写法，而是设计系统里所有字体层级（--fs-h1、--fs-p…）都要保持相对比例一致；一旦某个地方漏了 calc(var(--scale-base) * ...)，缩放就会断层。
