calc()允许同一物理量纲内混合长度单位（如px、%、rem、vw等）加减，乘除仅限一个带单位值与无单位数运算；单位不兼容或空格缺失会导致整条声明静默失效。
calc() 本身不是单位换算工具，它不自动把 rem 转成 px、也不把 % 算成具体 vw 值——它只做你明确写出来的运算，且所有单位必须合法参与计算。
calc() 支持哪些单位混合？
它允许在**同一物理量纲内**混合长度单位，比如：
-
px、em、rem、vh、vw、vmin、vmax、%（在 width/height 等支持百分比的属性中）可以互相加减 - 乘除只允许「一个带单位值 × 或 ÷ 一个无单位数」，例如：
calc(100% / 3)、calc(16px * 1.5) -
calc(50% * 2em)是非法的——浏览器直接忽略整条声明 - 角度单位（
deg、rad）可互算，但不能和长度单位混用；颜色、时间、频率等单位完全不可参与 calc 运算
为什么“calc(1rem + 2vw)”有时不生效？
这不是语法错，而是兼容性与上下文问题：
- 安卓旧版 WebView 和 IE11 对混合单位加减支持极差，常静默失败
-
%在font-size中参与 calc 的行为不稳定（部分浏览器直接丢弃） - 某些场景下，浏览器无法将
%解析为绝对长度（比如父容器宽高未定），导致整个表达式退回到初始值 - 务必实机测试：iOS Safari、Chrome for Android、Samsung Internet 都可能有细微差异
CSS 变量 + calc 怎么避免单位失效？
变量本身不做单位推导，全靠你写清楚：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：变量自带单位，如
--gap: 8px，再写margin: calc(var(--gap) * 2) - ⚠️ 易错：变量存纯数字
--gap: 8，却写calc(var(--gap) * 2px)—— 乘除右侧不能带单位，会报错 - ✅ 可行但需谨慎：用
calc(var(--gap) * 1px)把纯数字转为长度，但仅限乘除；加减仍要求单位一致 - ❌ 绝对不行：
width: var(--gap) * 2（没包calc()）、或calc(var(--gap) + 2)（2无单位，且上下文不明）
真正容易被忽略的点是：单位一致性不是靠人眼判断的，而是由浏览器运行时验证。哪怕表达式看起来天衣无缝，只要单位组合超出当前引擎支持范围，就整条失效，且通常不报错。
