当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript媒体查询API是什么？如何用JS监听屏幕变化？

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

2026-04-23 23:39:44 0浏览收藏

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

Javascript的媒体查询API是什么_怎样用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 看实际解析的字符串，确认是否与预期一致。