为何使用CSS pow()函数计算元素属性无法返回有效值？

核心问题：CSS pow() 函数尚未被主流浏览器支持 #

你遇到的问题本质是：pow()属于CSS Values and Units Level 4的草案函数，目前还没有被主流浏览器（包括你使用的Firefox 115.0.2）正式实现。

具体表现的原因 #

• 你测试的MDN示例是草案阶段的演示代码，并非已落地的标准特性，所以浏览器无法识别pow()函数，会直接标记整个calc()表达式无效，导致字体大小没有变化；
• 当你移除pow()改用简单运算（比如calc(1rem * 2)）时，这属于CSS Level 1就支持的标准calc()功能，浏览器能正常解析，所以样式生效。

CSS实现动态缩放的替代方案 #

如果想在CSS里实现幂运算相关的动态缩放，目前只能针对特定场景用替代方案：

• 整数次幂可以直接用乘法模拟：比如平方用var(--size) * var(--size)，立方用var(--size) * var(--size) * var(--size)；
• 非整数次幂（比如1.5次方）很难用纯CSS精准实现，这种场景下你已经用JS实现的方案是当前最可靠的选择。

内容的提问来源于stack exchange，提问作者martin.p