能否将:root全局CSS变量传递至其他CSS文件用于@media操作？

结论：无法直接在@media媒体查询的条件表达式中使用CSS变量，但可以在媒体查询内部的样式规则中使用变量

为什么条件里用不了？ #

CSS变量是浏览器在运行时计算的动态值，而@media媒体查询属于CSS的静态解析阶段逻辑——浏览器在判断媒体查询是否生效时，还未完成CSS变量的计算，因此无法将变量作为媒体查询的条件参数。你示例里的@media(min-width : var(--value))写法是无效的，浏览器会直接忽略这个媒体查询规则。

那哪些地方能用？ #

你代码里的--my-height在媒体查询内部的.my_class样式里使用是完全可行的。因为这部分是在媒体查询触发后，元素样式计算阶段才会读取变量值，此时CSS变量已经可以正常获取。

替代方案 #

如果需要动态控制媒体查询的条件，可以用以下两种方式：

• CSS预处理器（Sass/Less）：预处理器变量是编译时替换为具体值，能直接在媒体查询中使用。比如Sass写法：

// 全局变量文件
$value: 200px;
$my-height: 20px;

// 其他文件
@media(min-width: $value) {
  .my_class {
    height: $my-height;
  }
}

编译后会生成普通CSS的@media(min-width:200px)规则，浏览器能正常解析。

• JavaScript动态处理：读取CSS变量后，通过JS创建或修改媒体查询规则：

// 获取根元素的计算样式
const rootStyle = getComputedStyle(document.documentElement);
const breakpoint = rootStyle.getPropertyValue('--value').trim();
const targetHeight = rootStyle.getPropertyValue('--my-height').trim();

// 创建媒体查询实例
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint})`);

// 定义样式切换逻辑
function updateStyle(e) {
  const element = document.querySelector('.my_class');
  element.style.height = e.matches ? targetHeight : '';
}

// 初始执行一次
updateStyle(mediaQuery);
// 监听窗口大小变化
mediaQuery.addEventListener('change', updateStyle);

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