window.matchMedia 是 BOM 中用于监听 CSS 媒体查询变化的原生 API，返回 MediaQueryList 对象，其 matches 属性实时反映查询状态，并支持 addEventListener 监听变更，适用于断点响应、暗色模式、减少动画等场景，现代浏览器均支持，IE10+ 兼容。
window.matchMedia 是 BOM 中 window 对象提供的一个原生 API，用于在 JavaScript 层面监听和响应 CSS 媒体查询条件的变化，实现真正的“JS 媒体查询”。它不依赖框架，轻量、标准、可精确控制，是响应式交互逻辑（比如动态加载资源、切换行为模式、调整动画）的关键工具。
创建并检查媒体查询状态
调用 window.matchMedia(query) 传入符合 CSS 媒体查询语法的字符串，返回一个 MediaQueryList 对象。该对象的 matches 属性为布尔值，表示当前是否匹配该查询：
const mql = window.matchMedia('(max-width: 768px)');if (mql.matches) { console.log('当前是移动视口'); }- 注意：
matches是只读属性，反映**当前实时状态**，不是一次性快照
监听媒体查询变化（核心用法）
通过 addEventListener('change', handler) 监听视口尺寸或系统偏好变更（如深色模式、减少动画），避免轮询：
mql.addEventListener('change', e => { if (e.matches) { /* 进入小屏 */ } else { /* 退出小屏 */ } });- 推荐使用
addEventListener，addListener已废弃（仅旧版 Safari 支持） - 务必在不需要时调用
mql.removeEventListener，防止内存泄漏（尤其在组件卸载时）
常用媒体查询场景示例
实际开发中常结合以下查询做 JS 适配：
立即学习“Java免费学习笔记（深入）”；
-
断点响应：
window.matchMedia('(min-width: 1024px)')控制桌面端导航展开逻辑 -
暗色模式：
window.matchMedia('(prefers-color-scheme: dark)')动态切换主题类名或图表配色 -
减少动画：
window.matchMedia('(prefers-reduced-motion: reduce)')关闭非必要 CSS 动画或 JS 动效 -
横竖屏：
window.matchMedia('(orientation: landscape)')调整视频播放器布局
兼容性与降级处理
现代浏览器均支持 matchMedia（IE10+，所有主流移动端）。若需兼容 IE9 及更早版本，可手动监听 resize 事件并比对 window.innerWidth，但精度低、性能差、无法响应系统偏好变化，仅作兜底：
- 优先使用
matchMedia，它是语义化、高效、标准的方案 - 检测是否存在：
if ('matchMedia' in window) { /* 使用 matchMedia */ } else { /* 降级 resize 方案 */ } - 多个查询建议分别创建
MediaQueryList实例，不要复用同一个对象判断不同条件
