如何让CSS媒体查询适配动态修改的字体大小？

阿华AIGC实验室

2026-4-13

嘿，我懂你遇到的困扰！你一开始写的CSS：

body {
  font-size: large;
}

@media (max-width: 33em) {
  .not_used_on_narrow_displays {
    display: none;
  }
}

本来完全符合预期——给所有元素设了大号字体，窄屏时还能隐藏指定元素。可当你用JS动态修改body的字体大小：

document.body.style.fontSize = 'x-large';

虽然元素确实变大了，但你应该发现媒体查询的触发逻辑没跟着变，对吧？

问题的关键在这里：CSS媒体查询里的em单位，是基于根元素（<html>）的默认字体大小来计算的，和你设置的body字体大小没关系。浏览器默认根字体一般是16px，所以33em就是528px左右，哪怕你把body的字体改成x-large，这个阈值还是不会变。

那怎么让媒体查询能跟着动态修改的字体大小走呢？给你两个实用的解决办法：

办法一：把动态修改的目标换成根元素

既然媒体查询的em参考根元素，那我们就把字体大小的基准移到根元素上：

先修改你的CSS：

html {
  font-size: large;
}
body {
  font-size: 1em; /* 让body继承根元素的字体大小 */
}

@media (max-width: 33em) {
  .not_used_on_narrow_displays {
    display: none;
  }
}

然后把JS改成修改根元素的字体：
```
document.documentElement.style.fontSize = 'x-large';
```
这样一来，媒体查询的33em就会跟着根元素的字体大小同步变化，完美解决联动问题。

办法二：用CSS变量统一控制

如果你不想动原来的结构，也可以用CSS变量把字体大小和断点绑定起来：

先定义变量并应用到CSS里：

:root {
  --body-font-size: large;
  --narrow-breakpoint: 33em;
}

body {
  font-size: var(--body-font-size);
}

@media (max-width: var(--narrow-breakpoint)) {
  .not_used_on_narrow_displays {
    display: none;
  }
}

然后用JS同时修改变量（如果需要调整断点的话）：

// 修改字体大小
document.documentElement.style.setProperty('--body-font-size', 'x-large');
// 要是需要同步调整断点，也可以一起改
// document.documentElement.style.setProperty('--narrow-breakpoint', '28em');

这种方式更灵活，后续要调整样式或断点，直接改变量就行。

其实核心就是搞清楚媒体查询的单位参考对象，只要让动态修改的字体和媒体查询的基准保持一致，问题就迎刃而解啦！

备注：内容来源于stack exchange，提问作者Matt Miller