CSS中如何为calc()运算的结果指定单位？

你之前的写法不生效的核心原因是rem单位放在了calc()函数的括号外部，CSS无法将单位和运算结果正确关联，会被判定为非法属性值。

仅CSS层面的可行方案有两种：

• 方案1：直接为参与运算的数值附加rem单位
  如果运算项可以直接加单位，给参与运算的每个数值加上rem即可，calc()会自动返回带正确单位的运算结果：

  font-size: calc(2rem + 1rem);
  

• 方案2：无单位运算结果乘以1rem绑定单位（适合动态数值场景）
  如果你需要先完成无单位的数值运算，或者运算数值来自无单位的CSS变量，可以将整个运算结果乘以1rem来统一附加单位：

  font-size: calc((2 + 1) * 1rem);
  

  这种方案尤其适合使用CSS变量的场景，示例如下：

  :root {
    --font-size-multiplier: 3;
  }
  .element {
    font-size: calc(var(--font-size-multiplier) * 1rem);
  }
  

注意：calc()语法要求加减运算符两侧必须保留空格，否则会触发语法错误导致属性失效。

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