window.matchmedia 是 bom 中用于监听 css 媒体查询变化的 api，返回 mediaquerylist 对象，通过 .matches 获取当前状态，并用 addeventlistener 监听 change 事件响应尺寸、深色模式、减少动画等系统偏好变更。
window.matchMedia 是 BOM（Browser Object Model）中一个轻量但强大的 API，它允许 JavaScript 直接监听 CSS 媒体查询的变化，无需依赖窗口大小事件或手动计算断点，是实现精准响应式行为的关键工具。
什么是 matchMedia？
它将 CSS 媒体查询字符串（如 (max-width: 768px)）封装为一个 MediaQueryList 对象，该对象不仅可立即获取当前匹配状态，还支持通过 addEventListener 持续监听媒体查询条件的动态变化（比如用户缩放、横竖屏切换、系统偏好变更等）。
基础用法：判断并监听断点
只需传入标准媒体查询字符串即可：
- 调用
window.matchMedia("(max-width: 768px)")返回一个MediaQueryList实例； - 其
.matches属性返回布尔值，表示当前是否满足该查询； - 用
.addEventListener("change", handler)注册回调，在匹配状态切换时触发（注意：IE10+ 支持addListener，现代浏览器推荐用addEventListener）。
示例：适配移动端菜单收起逻辑
const mobileQuery = window.matchMedia("(max-width: 768px)");
function handleMobileChange(e) {
if (e.matches) {
document.body.classList.add("mobile");
console.log("进入移动视口");
} else {
document.body.classList.remove("mobile");
console.log("退出移动视口");
}
}
// 立即执行一次，避免首次加载遗漏状态
handleMobileChange(mobileQuery);
// 监听后续变化
mobileQuery.addEventListener("change", handleMobileChange);
监听系统级偏好（深色模式、减少动画等）
matchMedia 不仅用于尺寸，还能响应用户系统设置：
-
window.matchMedia("(prefers-color-scheme: dark)")判断深色模式； -
window.matchMedia("(prefers-reduced-motion: reduce)")检测是否启用“减少动画”； -
window.matchMedia("(hover: hover)")区分是否有悬停能力（如桌面 vs 触摸设备）。
这些查询在用户更改系统设置时也会触发 change 事件，适合做无障碍优化或体验增强。
注意事项与最佳实践
- 不要在每次 resize 中反复调用 matchMedia —— 它本身已内置监听机制，比
resize事件更高效、更语义化； - 监听器需在不需要时手动移除（
removeEventListener），尤其在组件卸载或单页应用路由切换时，防止内存泄漏； - 服务端渲染（SSR）环境不支持 matchMedia，使用前应加
typeof window !== "undefined"判断； - 可封装成 React Hook 或 Vue Composable，复用媒体查询逻辑。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
