css - 计算的 CSS 变量不会在媒体查询中更新

Question

我一直在使用一些使用 css 变量的代码，其中一个变量从calc包含另一个变量的公式中派生它的值（如下面的代码）

:root {
 --parent-size: 20rem;
 --child-size: calc(var(--parent-size) / 2);
}

...

@media (min-width: 768px) {
 --parent-size: 30rem;
}

何时var(--parent-size)改变；var(--child-size)保持不变。我假设这可能是一个错误，因为它只影响具有计算值的变量。

我在这里添加了一个 jsfiddle 供参考

标签： csssasscss-variables