calc()中px与rem不能直接混算，必须将px值转为纯数字，除以基准字号（如16）后再乘1rem，即calc(32 / 16 * 1rem)；css变量需存无单位数值，且根字号变化时calc不会自动重算。
calc里直接用px和rem混算会失败
浏览器不允许在 calc() 中把带单位的值（如 16px）和无单位数（如 16）直接相除，更不支持 px / rem 这类单位相除。常见报错是“Invalid property value”，或者计算结果被静默丢弃。
真正能走通的路径只有一条：把像素值当作纯数字参与运算，再手动补上 rem 单位——前提是根元素字体大小已知且固定（通常是 16px）。
- 假设
:root设了font-size: 16px，那么1rem = 16px，换算公式就是目标px值 / 16，结果单位为rem - 不能写
calc(32px / 1rem)—— 浏览器不认这种单位除法 - 也不能写
calc(32 / 16)rem——rem不能贴在calc外面，必须在括号内作为单位出现 - 正确写法是：
calc(32 / 16 * 1rem)或等价的calc(32 * 1rem / 16)
CSS变量中用calc做px→rem动态换算
核心是把像素数值抽成变量，再在 calc 中除以基准值（如 16），最后乘 1rem。这样既保持变量可维护，又让换算逻辑清晰。
:root {
--base-font-size: 16;
--space-xs: 4;
--space-s: 8;
--space-m: 16;
}
<p>.example {
margin: calc(var(--space-s) / var(--base-font-size) <em> 1rem)
calc(var(--space-m) / var(--base-font-size) </em> 1rem);
}</p>
-
--base-font-size必须是纯数字（不带单位），否则除法会失效 - 所有待转换单位的变量（如
--space-s）也必须是纯数字，代表“对应多少像素” - 如果根字体大小是响应式（比如用
clamp()动态变），那这个方案就不可靠——calc无法读取运行时计算出的font-size值
遇到非16px根字号怎么办
只要知道实际根字号是多少像素，就改 --base-font-size 的值。比如设计稿按 10px = 1rem（即根字号设为 10px），那就把变量改成 --base-font-size: 10，其余换算自动适配。
- 常见误区：试图用
1em或100%替代1rem—— 不行，em是相对父元素的，%在这里无意义 - 必须用
1rem，它是唯一稳定锚定根字体的单位 - 如果项目用了 postcss-pxtorem 等构建时转换工具，CSS变量里的
calc不会被处理，得靠这套手写逻辑兜底
别指望calc自动感知font-size变化
calc() 在声明时求值，不是运行时监听。哪怕你用 JS 动态改了 document.documentElement.style.fontSize，已生效的 calc(var(--x) / var(--base) * 1rem) 不会重算——因为变量值没变，1rem 的物理尺寸变了，但 CSS 引擎不会回溯重解析该表达式。
- 这意味着：响应式根字号 + CSS变量 + calc 换算 = 静态快照，不是活链接
- 真要动态适配，得用 JS 重设变量值，或改用
clamp()+ 视口单位组合，绕开rem依赖 - 最易被忽略的一点：很多人把
--base-font-size写成16px，看着顺眼，但一除就炸——单位必须剥离干净
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
