matchMedia 是 BOM 中用于监听和检测 CSS 媒体查询状态的原生 API，支持直接响应视口、设备特性变化；通过 window.matchMedia("媒体查询") 获取 MediaQueryList 对象，其 matches 属性返回当前匹配状态，可配合 addEventListener("change", handler) 监听动态变化，兼容 IE10+，需注意 SSR 环境下避免执行。
matchMedia 是 BOM 中用于监听和检测 CSS 媒体查询状态的原生 API，无需依赖框架或额外库，直接与视口、设备特性联动。
创建并检查媒体查询匹配状态
调用 window.matchMedia() 传入媒体查询字符串（如 "(max-width: 768px)"），它会立即返回一个 MediaQueryList 对象，其 matches 属性为布尔值，表示当前是否满足该条件。
- 例如：
const mq = window.matchMedia("(prefers-color-scheme: dark)"); console.log(mq.matches); // true 或 false - 注意：媒体查询字符串必须符合 CSS 语法，不加
@media，也不需要引号包裹在 CSS 中那种写法——JS 里就是纯字符串 - 常见可用查询包括：
min-width/max-width、prefers-reduced-motion、hover、any-hover、orientation等
监听媒体查询状态变化
通过 addListener()（旧版）或更推荐的 addEventListener("change", handler) 注册回调，当视口缩放、窗口调整、系统主题切换等导致匹配状态改变时自动触发。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 推荐使用现代事件监听方式：
mq.addEventListener("change", () => { if (mq.matches) { /* 进入暗色模式 */ } else { /* 切回亮色 */ } }); - 记得在不需要时移除监听（尤其在组件卸载时），避免内存泄漏：
mq.removeEventListener("change", handler); -
removeListener()已废弃，不建议新项目使用
结合 BOM 动态响应布局或行为
利用 matchMedia 可以替代部分 resize 监听逻辑，更语义化、性能更好（浏览器原生优化），适合做响应式 JS 行为控制。
立即学习“Java免费学习笔记（深入）”；
- 例如：移动端菜单只在小屏下启用交互逻辑：
const isMobile = window.matchMedia("(max-width: 600px)").matches; if (isMobile) initMobileMenu(); - 再如：禁用动画以适配“减少运动”偏好：
window.matchMedia("(prefers-reduced-motion: reduce)").matches && document.body.classList.add("reduced-motion"); - 多个查询可分别创建实例，互不影响
兼容性与兜底处理
IE10+ 支持 matchMedia，但 IE 不支持 addEventListener 方式监听 change；Safari 旧版本对某些媒体特性支持有限（如 prefers-color-scheme 从 Safari 12.1 开始）。
- 简单兼容写法：
if ("matchMedia" in window) { /* 使用 matchMedia */ } else { /* 降级为 window.innerWidth 判断 */ } - 对关键功能（如暗色模式），建议同时监听系统变化 + 初始化时读取一次，确保首屏正确
- 服务端渲染（SSR）环境无
window，需确保代码只在客户端执行
