matchMedia 是浏览器提供的用于查询和监听 CSS 媒体特性的 JS 接口，返回 MediaQueryList 对象，通过 .matches 获取当前状态，并用 addEventListener 监听变化，需手动处理初始值，现代浏览器均支持，服务端不可用。
在 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免费学习笔记（深入）”；
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对象，会报错 - 初始值必须主动处理：监听器只响应“变化”，页面加载时的初始状态不会触发事件，需手动执行一次回调
matchMedia 是轻量、标准、高兼容的响应式控制手段，把 CSS 媒体逻辑自然延伸到 JS 层，适合做主题同步、布局适配、交互降级等场景。用好它，能减少对 resize 节流、硬编码断点的依赖。
