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) 注册回调，当视口缩放、窗口调整、系统主题切换等导致匹配状态改变时自动触发。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 推荐使用现代事件监听方式：
mq.addEventListener("change", () => { if (mq.matches) { /* 进入暗色模式 */ } else { /* 切回亮色 */ } }); - 记得在不需要时移除监听（尤其在组件卸载时），避免内存泄漏：
mq.removeEventListener("change", handler); -
removeListener()已废弃，不建议新项目使用
结合 BOM 动态响应布局或行为
利用 matchMedia 可以替代部分 resize 监听逻辑，更语义化、性能更好（浏览器原生优化），适合做响应式 JS 行为控制。
- 例如：移动端菜单只在小屏下启用交互逻辑：
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，需确保代码只在客户端执行
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
