如何在CSS中动态将单位转为rem？calc计算失效求助

问题背景 #

• 根元素字体大小设置为23px
• 目标字体大小为16px，预期换算结果为 16/23 ≈ 0.695rem
• 尝试通过CSS变量结合calc()实现动态计算，但代码无法生效

错误代码分析 #

原CSS代码存在多处语法错误：

#im_p{
  font-size: calc(var(--im-p-font / 16)) rem;
}

1. var()语法错误：变量引用需写成var(--变量名)，不能将运算逻辑放入括号内
2. calc()格式错误：多余的嵌套括号，且rem单位不能单独写在calc()外部
3. 运算逻辑颠倒：需求是16除以根字体大小，而非根字体大小除以16

修正后的代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            /* 用变量存储根字体大小的数值，同时设置根元素字体大小 */
            font-size: var(--root-font-size)px;
        }
        #im_p{
            /* 计算目标px对应的rem值：目标数值 / 根字体数值 + rem单位 */
            font-size: calc(16 / var(--root-font-size))rem;
        }
    </style>
</head>
<body>
    <p id="im_p">I'm Paragraph</p>
</body>
</html>

JS部分 #

const root = document.documentElement;
// 设置根字体大小的数值变量
root.style.setProperty('--root-font-size', 23);

说明 #

• 通过变量存储根字体的数值，同时绑定根元素的font-size属性，确保rem基准正确
• 在calc()中完成比例计算后直接拼接rem单位，得到符合预期的动态值
• 后续调整根字体大小时，只需修改--root-font-size变量的值，目标元素字体大小会自动按比例转换为对应rem值

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