var()本身不支持动态计算字号缩放，必须配合calc()和clamp()等函数实现响应式；它仅作值替换，无法自动响应视口变化或执行运算。
var() 本身不支持动态计算字号缩放
var() 只是 CSS 自定义属性的值替换机制，它不会自动响应视口变化或执行数学运算。你写 font-size: var(--fs);，哪怕 --fs 被设为 1.2rem，它也不会随屏幕变小而自动缩小——除非你手动在媒体查询里改这个变量值，或者配合 calc() 和相对单位做响应式推导。
真正起作用的是 calc() + clamp() + 自定义属性组合
现代方案依赖 clamp() 提供的流体缩放能力，再用 var() 抽离参数，提高可维护性：
html {
--fs-min: 1rem;
--fs-max: 1.5rem;
--fs-bp: 40rem; /* 视口宽度临界点 */
}
<p>h1 {
font-size: clamp(
var(--fs-min),
calc(var(--fs-min) + 0.5 * ((100vw - var(--fs-bp)) / (120rem - var(--fs-bp)))),
var(--fs-max)
);
}</p>
说明：
-
clamp(min, preferred, max)是浏览器原生流体字号核心，不是var()的功能延伸 -
var(--fs-bp)必须是长度单位（如40rem），不能是无单位数字，否则calc()会报Invalid property value - 分母里的
120rem - var(--fs-bp)是视口缩放区间，必须确保不为零，否则整个calc()失效 - Chrome 116+ 支持
clamp()中直接用var()，旧版本需降级为媒体查询
媒体查询 fallback 是最稳妥的兼容写法
当目标环境不支持 clamp() 或复杂 calc() 时，直接用 var() 配合断点更可控：
:root {
--fs-base: 1rem;
}
<p>h1 {
font-size: var(--fs-base);
}</p><p>@media (min-width: 40rem) {
:root { --fs-base: 1.2rem; }
}</p><p>@media (min-width: 80rem) {
:root { --fs-base: 1.5rem; }
}</p>
注意点：
- 自定义属性作用域是
:root，不能写在选择器内部（如h1 { --fs-base: 1.2rem; }不会影响h1自身的font-size） - 多个媒体查询之间要有明确区间覆盖，避免遗漏中间视口（比如跳过
60rem到79rem） - 使用
rem而非px，才能继承根元素缩放，适配用户系统字体偏好
不要在 var() 里塞 calc() 表达式再调用
这种写法看似简洁，但多数浏览器不支持（包括 Chrome 125、Firefox 126）：
:root {
--fs: calc(1rem + 0.5vw); /* ❌ 不会被解析为有效长度 */
}
h1 { font-size: var(--fs); } /* 渲染为无效值，回退到浏览器默认 */
原因：
- CSS 自定义属性值是“惰性求值”的字符串，
var(--fs)展开后得到的是字面量"calc(1rem + 0.5vw)"，不是可计算的表达式 - 只有
calc()函数内部才触发计算，外部包裹var()不触发重解析 - 正确做法是把
calc()写在使用处，仅用var()管理其中的常量部分
实际项目中，clamp() 组合 var() 是当前平衡灵活性与兼容性的主流做法，但别指望靠一个 var() 调用就实现“动态”——真正的动态来自函数语义和响应式上下文，不是变量本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
