window.matchMedia 是检测媒体查询变化的首选，因其直接绑定浏览器媒体查询引擎、精准响应状态切换、性能低且支持所有CSS媒体特性，避免resize抖动与轮询问题。
为什么 window.matchMedia 是检测媒体查询变化的首选
因为它是唯一能精准响应 CSS 媒体查询状态切换的原生 API，不依赖 resize 事件抖动，也不需要轮询。它直接绑定到浏览器的媒体查询计算引擎，状态变更时触发回调，性能开销极低。
常见误区是用 window.addEventListener('resize', ...) 监听视口变化再手动判断宽度——这既无法捕获 Safari/Electron 中因未声明 screen 导致的媒体查询失效，又会在快速拖拽窗口时频繁触发、漏掉中间状态。
-
window.matchMedia返回的是MediaQueryList对象，自带matches属性（布尔值）和addListener/removeListener方法（注意：现代标准已推荐用addEventListener('change', ...)） - 它只监听「该媒体查询是否匹配当前环境」这一布尔结果，不是监听像素值本身，所以更语义、更稳定
- 支持所有 CSS 媒体查询语法，包括
(orientation: landscape)、(prefers-reduced-motion)等非尺寸特性
@media screen and (max-width: 768px) 必须显式写 screen
在 Safari 和 Electron 中，@media (max-width: 768px) 很可能不生效，根本原因不是断点写错，而是默认解析为 @media all and (max-width: 768px)；而 all 类型在部分 WebKit 渲染引擎里会跳过对屏幕类特性的计算。
正确写法必须带 screen：
立即学习“前端免费学习笔记（深入）”；
@media screen and (max-width: 768px) {
.nav { display: none; }
}对应的 JS 监听也得保持一致：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
const mql = window.matchMedia('screen and (max-width: 768px)');
mql.addEventListener('change', e => {
if (e.matches) {
console.log('进入移动端视口');
}
});- 不要写
only screen——only是为兼容 IE8 及更早版本设计的，现代项目可省略 - 如果用
@import或<link media="...">加载样式表，同样要写screen and (min-width: 768px)，否则加载逻辑可能被忽略
断点顺序错乱会导致 matchMedia 回调不触发预期状态
媒体查询的 CSS 优先级和 JS 的 matchMedia 判断是两套机制，但它们共享同一套匹配逻辑。如果你在 CSS 中把大屏规则写在前面、小屏写在后面，比如：
@media screen and (min-width: 1024px) { /* 大屏 */ }
@media screen and (max-width: 768px) { /* 小屏 */ }当视口宽度为 600px 时，两个规则都满足，但 CSS 层面后者本应生效；而 window.matchMedia('(max-width: 768px)') 仍会返回 true —— 这没问题。真正出问题的是：你可能误以为「只要这个 media query 匹配，CSS 就一定按你设想的方式渲染」，结果发现 DOM 表现和 mql.matches 不一致。
- 根源常是 selector 特异性冲突，比如大屏规则用了
.container.main，而小屏只写了.container，导致样式被覆盖 - 解决办法是统一按「移动优先」组织 CSS：基础样式不加媒体查询，然后用
min-width逐级增强，JS 监听也对应用min-width更直观（如screen and (min-width: 768px)） - 避免混用
max-width和min-width在同一逻辑组里，容易绕晕自己，也难维护
监听多个媒体查询时别复用同一个 MediaQueryList 实例
每个 window.matchMedia(...) 调用返回独立的 MediaQueryList 实例，不能靠修改字符串参数来“复用”。下面这段代码是错的：
let mql = window.matchMedia('(max-width: 768px)');
mql = window.matchMedia('(min-width: 992px)'); // ❌ 覆盖引用，旧监听器没移除正确做法是分别创建、分别管理：
const mobileMQL = window.matchMedia('screen and (max-width: 768px)');
const desktopMQL = window.matchMedia('screen and (min-width: 992px)');
<p>mobileMQL.addEventListener('change', handleMobile);
desktopMQL.addEventListener('change', handleDesktop);</p><p>// 卸载时也要分别 remove
function cleanup() {
mobileMQL.removeEventListener('change', handleMobile);
desktopMQL.removeEventListener('change', handleDesktop);
}- 忘记移除监听器会导致内存泄漏，尤其在单页应用中组件反复挂载/卸载时
- 不要在函数内反复调用
matchMedia而不保存引用——每次调用都是新实例，旧的监听器还在后台运行 - 可以封装一个轻量 hook 或工具函数，自动绑定/清理，但底层逻辑逃不开这个原则
最易被忽略的一点：window.matchMedia 返回的 MediaQueryList 在首次调用时就已计算初始状态，但不会主动触发回调。你必须手动执行一次 handler(mql) 来同步初始状态，否则页面加载后第一次判断会丢失。
