window.matchMedia()是响应式动态监听核心API，支持视口尺寸、配色方案、横竖屏等媒体查询实时响应；返回MediaQueryList对象，含matches属性和addEventListener方法；可适配深色模式、组合查询，并需及时清理监听防内存泄漏。
JavaScript 中的 window.matchMedia() 是实现响应式行为动态监听的核心 API，它能实时响应视口尺寸、配色方案、横竖屏等媒体查询条件的变化，比单纯监听 resize 事件更精准、高效、语义清晰。
matchMedia 的基本用法与监听机制
它接受一个 CSS 媒体查询字符串（如 "(max-width: 768px)"），返回一个 MediaQueryList 对象。该对象包含 matches 属性（布尔值，表示当前是否匹配）和 addEventListener 方法（推荐方式），用于监听匹配状态变化。
示例：
const mq = window.matchMedia('(max-width: 768px)');
if (mq.matches) {
console.log('进入移动端断点');
} else {
console.log('处于桌面端');
}
// 使用 addEventListener 监听变化（注意：不推荐用 deprecated 的 onchange）
mq.addEventListener('change', (e) => {
if (e.matches) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
});
适配深色模式与系统偏好
利用 (prefers-color-scheme: dark) 可以自动跟随系统主题，无需用户手动切换开关，提升体验一致性。
立即学习“Java免费学习笔记（深入）”；
- 初始化时读取当前偏好：
mq.matches判断是否已启用深色模式 - 监听 change 事件，在 DOM 中动态添加
data-theme="dark"或切换 CSS 变量 - 注意：部分旧版 Safari 需用
addListener（已废弃但兼容性更好），现代浏览器统一用addEventListener
处理多个断点与组合查询
可同时创建多个 matchMedia 实例，分别管理不同逻辑；也可使用复合查询，如 "(min-width: 768px) and (orientation: landscape)"。
- 避免在 resize 中反复调用 matchMedia——它本身是轻量且惰性求值的，无需防抖
- 每个实例独立监听，互不影响；销毁监听时调用
removeEventListener（需保留 handler 引用） - 组合查询建议提取为常量，提高可读性与复用性，例如：
const IS_TABLET_LANDSCAPE = '(min-width: 768px) and (max-width: 1024px) and (orientation: landscape)'
清理监听避免内存泄漏
当组件卸载或逻辑不再需要监听时，必须移除事件监听器，尤其在单页应用（SPA）中容易被忽略。
- 保存 handler 函数引用，不能用匿名函数绑定
- 在 cleanup 阶段（如 React useEffect 的返回函数、Vue onUnmounted）调用
mq.removeEventListener('change', handler) - 也可在 handler 内部检查元素是否仍存在于 DOM，提前 return，增强健壮性
