calc() 是唯一能安全混合单位的 css 方案：它原生支持单位计算且兼容 css 变量，但变量必须在 calc() 内引用；加减运算需单位一致或含无单位数字；clamp() 与 calc() 组合更适用于响应式字号；调试推荐用 content 伪元素验证表达式有效性。
calc() 是唯一能安全混合单位的 CSS 方案
CSS 变量本身不支持运算，--size: 10px + 2em 这类写法会直接失效，浏览器会忽略整条声明。真正起作用的是 calc() —— 它是 CSS 原生支持单位混合计算的唯一函数，且与 CSS 变量天然兼容。关键点在于：变量必须先被引用进 calc() 内部，不能在变量定义时“预计算”。
常见错误是试图这样写：
--base: 16; --gap: calc(var(--base) * 1px); /* ❌ 错误：乘号右边不能是纯单位 */ --margin: var(--gap) * 2; /* ❌ 错误：变量外无法运算 */
正确做法是把所有计算逻辑收束到 calc() 中，单位必须显式附着在数值上：
-
--base: 16（纯数字，无单位） -
--gap: calc(var(--base) * 1px)（单位只出现在calc内） -
margin: calc(var(--gap) * 2)或margin: calc(var(--base) * 2px)
加减运算必须单位一致，否则报错
calc() 对加减有严格单位约束：参与加减的每个操作数必须是相同单位，或其中一个是无单位数字（仅限长度类单位如 px、em、rem、vh 等）。例如：
-
calc(10px + 2em)✅ 允许（不同单位可加） -
calc(10px + 5%)❌ 大部分浏览器拒绝解析，渲染为默认值 -
calc(10px + 2)✅ 允许（数字自动按当前上下文解释为px） -
calc(var(--x) + 1rem)✅ 前提是--x的值本身带合法长度单位，比如2em；若--x: 2，则等价于calc(2 + 1rem)，此时2被当作2px处理（取决于属性，font-size下可能按em解释，行为不统一）
最稳妥的写法是让所有变量值都明确带单位，避免依赖隐式转换。
响应式场景下用 clamp() + calc() 组合更可靠
单纯靠 calc(var(--min) + (var(--max) - var(--min)) * ((100vw - 320px) / (1200 - 320))) 实现流体字号，容易因单位混用或括号缺失导致整个表达式失效。现代方案优先用 clamp() 封装基础范围，再用 calc() 做微调：
:root {
--text-min: 1rem;
--text-max: 1.5rem;
--text-step: 0.1rem;
}
<p>h1 {
font-size: clamp(var(--text-min), calc(var(--text-min) + (100vw - 320px) / 20), var(--text-max));
}</p>
注意：clamp() 三个参数单位必须一致，中间表达式仍需用 calc() 包裹；100vw - 320px 合法，但 100vw - 320 不合法（缺少单位）。
调试技巧：用 content 属性临时输出计算结果
CSS 没有 console.log，但可通过伪元素 + content 快速验证 calc() 是否按预期工作：
.debug::before {
content: "gap=" calc(var(--gap));
position: fixed;
top: 0;
left: 0;
background: #000;
color: #fff;
padding: 4px;
font-size: 12px;
z-index: 9999;
}
虽然 content 里不能显示纯数值（会转成字符串），但只要表达式语法正确，浏览器就不会报错；一旦出错，content 会为空，说明 calc() 内部某处单位不匹配或括号失衡。这是比反复刷新看样式更直接的排错方式。
单位混用的坑不在语法多难，而在错误不报错——它只是静默失效，然后回退到初始值。所以每次改完 calc()，务必检查 computed styles 面板里目标属性是否真被应用了，而不是只信编辑器高亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
