JavaScript 中 BOM 怎么使用 matchMedia 监听媒体查询变化-js教程-PHP中文网

matchmedia 是浏览器提供的用于查询和监听 css 媒体特性的 js 接口，返回 mediaquerylist 对象，通过 .matches 获取当前状态，并用 addeventlistener 监听变化，需手动处理初始值，现代浏览器均支持，服务端不可用。

javascript 中 bom 怎么使用 matchmedia 监听媒体查询变化

在 JavaScript 中，matchMedia 是 BOM（Browser Object Model）提供的一个接口，用于查询 CSS 媒体特性（如视口宽度、暗色模式、横竖屏等），并支持监听这些特性的动态变化。它不依赖 CSS，纯 JS 即可操作，是响应式逻辑和主题切换的常用工具。

创建并检查媒体查询匹配状态

调用 window.matchMedia(query) 返回一个 MediaQueryList 对象，其 .matches 属性表示当前是否满足查询条件：

const isWideScreen = window.matchMedia('(min-width: 1200px)');
console.log(isWideScreen.matches); // true 或 false

常见查询示例：

'(prefers-color-scheme: dark)' —— 检测系统是否启用暗色模式
'(orientation: landscape)' —— 判断设备是否为横屏
'(max-width: 768px)' —— 视口宽度是否 ≤ 768px
'(hover: hover) and (pointer: fine)' —— 是否支持悬停且有精准指针（如鼠标）

监听媒体查询变化（关键用法）

通过 .addEventListener('change', handler) 注册回调函数，在匹配状态改变时触发（例如窗口缩放、系统主题切换、旋转屏幕）：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');

function handleDarkModeChange(e) {
  if (e.matches) {
    document.body.classList.add('dark');
  } else {
    document.body.classList.remove('dark');
  }
}

// 添加监听
darkModeQuery.addEventListener('change', handleDarkModeChange);

// ⚠️ 注意：首次匹配状态需手动处理（addEventListener 不会回溯触发）
handleDarkModeChange(darkModeQuery);

⚠️ 兼容性提示：现代浏览器均支持 addEventListener；旧版 Safari 和 IE 需用已废弃的 .addListener()，但建议忽略 IE，Safari 14+ 已全面支持标准事件。

移除监听避免内存泄漏

当组件卸载或不再需要监听时，务必调用 .removeEventListener() 清理：

function cleanup() {
  darkModeQuery.removeEventListener('change', handleDarkModeChange);
}

// 例如在 React useEffect 的 cleanup 函数中调用
// 或在页面隐藏/模块销毁时调用

不清理可能导致闭包持续引用 DOM 或作用域变量，尤其在单页应用中容易引发内存问题。

实用技巧与注意事项

多个查询可共存：每个 matchMedia 实例独立，可同时监听暗色模式、横屏、宽屏等多个条件
无需重复查询：不要在 resize 事件里反复调用 matchMedia —— 它本身已高效响应底层变化，比手动读取 window.innerWidth 更准确可靠
服务端不可用：该 API 仅在浏览器环境有效（BOM 特性），Node.js 等服务端环境无 window 对象，会报错
初始值必须主动处理：监听器只响应“变化”，页面加载时的初始状态不会触发事件，需手动执行一次回调