JavaScript媒体查询API是什么？如何用JS监听屏幕变化？

JavaScript媒体查询API的核心其实是MediaQueryList接口，而非常被误解的window.matchMedia()函数——后者仅是创建可监听对象的工厂；真正实现响应式状态监听的是MediaQueryList实例，它通过matches属性提供当前匹配快照，并借助addEventListener('change')动态响应屏幕尺寸变化，但需特别注意手动检查初始状态、严格遵循媒体查询语法（如括号不可省略）、避免重复创建监听器，以及在老旧浏览器中合理处理addListener弃用和IE兼容性问题——掌握这些关键细节，才能写出健壮、可维护的响应式JavaScript逻辑。

MediaQueryList 接口是核心，不是 window.matchMedia() 本身

很多人以为 window.matchMedia() 是“媒体查询 API”，其实它只是创建 MediaQueryList 实例的工厂函数。真正响应变化、承载状态的是返回的 MediaQueryList 对象——它有 matches 属性和 addEventListener() 方法，这才是可监听、可响应的关键。

直接读 window.matchMedia('(max-width: 768px)').matches 只能取快照，不监听；必须用 addListener()（旧）或 addEventListener('change', ...)（新）才能响应尺寸变化。

• addListener() 在 Chrome 109+、Firefox 117+ 已被弃用，但仍有大量老项目在用，兼容性需留意
• addEventListener() 是标准方式，但 IE 完全不支持，如需支持 IE，必须降级 fallback
• MediaQueryList 实例可复用：同一查询字符串多次调用 matchMedia() 返回不同对象，不要重复创建监听器

监听屏幕尺寸变化的最小可行代码

下面这段代码在现代浏览器中稳定工作，监听从桌面到移动的切换：

const mql = window.matchMedia('(max-width: 768px)');
const handleMediaChange = (e) => {
  if (e.matches) {
    console.log('进入移动端视图');
  } else {
    console.log('回到桌面视图');
  }
};

// 使用 addEventListener（推荐）
mql.addEventListener('change', handleMediaChange);

// 初始状态也要检查（change 不触发初始匹配）
if (mql.matches) {
  handleMediaChange(mql);
}

注意：不能只靠事件回调判断初始状态——change 只在查询结果翻转时触发，页面加载时可能已处于目标断点内，必须手动检查 mql.matches 并调用一次处理函数。

常见错误：把 media query 字符串写错或漏括号

错误写法会导致 mql.matches 永远为 false，且不报错，极难排查：

• window.matchMedia('max-width: 768px') ❌ 缺少括号 → 应为 '(max-width: 768px)'
• window.matchMedia('(min-width: 768px) and (max-width: 1024px)') ✅ 正确，多条件用 and 连接
• window.matchMedia('(width ❌ CSS 媒体查询不支持运算符写法
• 使用 screen、print 等媒体类型时，必须写全：'screen and (max-width: 768px)'

调试技巧：打印 mql.media 看实际解析的字符串，确认是否与预期一致。

性能与内存：监听器没清理会泄漏

组件卸载（如 React unmount、Vue destroyed）时，若没移除监听器，MediaQueryList 仍持有回调引用，可能导致闭包中 DOM 节点无法回收。

• 对应添加监听器的地方，必须配套清理：mql.removeEventListener('change', handleMediaChange)
• 使用 addListener() 时，用 removeListener() 配对，不能混用
• React 中建议在 useEffect 的 cleanup 函数里移除；Vue 3 的 onBeforeUnmount 同理
• 临时监听（比如只在弹窗打开期间响应）更要主动管理生命周期

一个容易被忽略的点：MediaQueryList 本身不会自动销毁，哪怕窗口关闭或 iframe 卸载，只要 JS 上下文还在，它就持续存在。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~