能否仅用原生CSS在媒体查询中修改已声明的CSS变量？

不行，原生CSS里没办法直接通过引用变量的旧值来在媒体查询中更新它。你写的代码会出现循环引用问题：当在媒体查询里定义--elem-size: calc(var(--elem-size) * 2)时，var(--elem-size)会优先指向当前作用域里这个新定义的变量，而不是之前的20px，浏览器无法解析这种循环依赖，最终这个变量会失效。

为什么会这样？ #

CSS变量的解析规则是：在同一个作用域（比如媒体查询内的#container选择器）中，变量的引用会指向当前作用域内最新的定义，而不是继承或之前声明的旧值。这就导致你试图用变量自身来计算新值的写法无法被正确解析。

可行的替代方案 #

虽然不能直接引用旧值更新，但可以通过优化基础变量的写法来减少冗余：

• 把基准值定义在根元素或公共选择器中，然后在媒体查询里基于基准值计算新值：

:root {
  --base-elem-size: 20px;
}

#container {
  --elem-size: var(--base-elem-size);
}

@media only screen and (min-width: 800px) {
  #container {
    --elem-size: calc(var(--base-elem-size) * 2);
  }
}

• 如果变量数量多，可以按模块分组管理基础变量，比如把所有尺寸相关的基准变量放在一起，这样维护起来也不会太繁琐。

目前原生CSS没有更简洁的方式实现“基于变量旧值更新”的需求，基础变量方案是最稳定且符合规范的做法。

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