CSS如何使用calc()实现px转rem及不同单位值的合并运算

问题原因 #

你写的两个写法都存在问题：

• calc(32px + 1rem)本身语法是合法的，没有生效大概率是你的根元素（<html>）font-size不是默认16px，或者其他样式优先级覆盖了该属性
• calc(32px / 16) + 1rem)存在两个错误：一是32px除以16后单位还是px，没有转换为rem；二是括号不匹配，运算逻辑没有完全放在calc的括号内部

正确实现方案 #

如果你的根元素font-size固定为16px，想要得到3rem的最终值，直接按下面写即可：

font-size: calc(32px / 16 * 1rem + 1rem);

运算逻辑：32px除以16得到无单位的数值2，乘以1rem后得到2rem，再和1rem相加最终得到3rem，符合你的需求。

如果你的根元素font-size是动态变化的，原生CSS的calc无法直接感知根字体的px值完成自动换算，这种场景可以通过CSS变量统一管理根字体大小实现动态适配：

1. 先在根元素定义字体大小变量

html {
  /* 可根据需求修改该值，后续换算逻辑自动适配 */
  font-size: 16px;
  --root-font-size: 16px;
}

2. 再写font-size的换算逻辑

font-size: calc(32px / var(--root-font-size) * 1rem + 1rem);

内容的提问来源于stack exchange，提问作者StackOverflowNewbie