CSS变量在媒体查询里为啥不生效？

Mc.书希提问于 2026-02-28 15:03:20 阅读 29

前端

我在写响应式布局时，想用CSS变量控制不同屏幕下的字体大小，但发现媒体查询里修改变量后，页面没反应。明明语法看起来没问题啊。

我试过这样写：

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

.text {
  font-size: var(--font-size);
}

但小屏下字体还是16px，根本没变。是不是CSS变量不能在媒体查询里用？还是我哪里写错了？

CSS3 Grid布局动画效果

我来解答赞 3 收藏

反馈

1 条解答

瑞云（打工版） Lv1

代码本身没问题，CSS变量完全可以在媒体查询里用。我刚本地跑了一下你的代码是生效的，检查两个地方：一是浏览器窗口宽度是不是真的小于等于768px，二是看看有没有其他样式把 .text 的 font-size 覆盖掉了。我之前这样搞的时候也踩过坑，后来发现是浏览器缩放比例搞得鬼，重置一下缩放或者用开发者工具直接看计算后的样式值就知道了。

2026-02-28 23:29