matchMedia监听器未清理导致样式错乱：SPA路由切换时旧监听未解绑，多个handler同时修改DOM；容器查询与视口断点混用引发DOM重建；HTML非法嵌套在断点切换时暴露结构缺陷；file://协议下matchMedia始终返回false。
matchMedia监听器没清理，断点切换时样式错乱
页面反复进入/退出响应式断点后出现样式残留、元素错位或JS行为异常，大概率是matchMedia监听器堆积导致的。浏览器不会自动回收这些监听，尤其在 SPA 路由切换或组件重挂载时，旧监听仍在后台运行，新监听又叠加上去，最终多个 handler 同时修改同一组 DOM。
- 每次调用
matchMedia(query).addEventListener('change', handler)都必须配对removeEventListener；不能只靠组件卸载时清空变量，要显式解绑 - 避免在事件回调里重复绑定：比如 scroll 或 resize 触发的断点检测函数里调用
matchMedia，会快速生成新监听器 - 用闭包缓存监听实例，而不是每次
matchMedia('(min-width: 768px)')都新建一个——不同实例即使查同一 query，也是独立对象，无法用同一个removeEventListener清理 - 推荐写法：
const mql = matchMedia('(min-width: 768px)'); mql.addEventListener('change', handler);，销毁时明确调用mql.removeEventListener('change', handler)
视口断点和容器查询混用触发 DOM 重建
当同时使用 @media (min-width: 768px) 和 @container (min-width: 300px) 时，若容器本身宽度由视口断点控制（例如 width: 100%; max-width: 1200px），浏览器可能在断点临界点反复触发容器尺寸重计算，导致内部子元素被销毁重建——特别是含 iframe、canvas 或第三方 SDK 的节点，会重新初始化、丢失状态、发起重复请求。
- 检查容器是否依赖视口级 CSS 控制宽高：比如
.card { width: 100%; }在@media (max-width: 768px)下变成width: 300px，这个变化会触发容器查询的尺寸变更事件 - 容器查询要求父容器声明
container-type: inline-size，但该声明若被视口媒体查询移除或覆盖（如@media (prefers-reduced-motion) { .card { container-type: none; } }），会导致容器查询失效并引发布局抖动 - 避免在容器上同时写
width和container-query——优先用flex或grid布局让容器尺寸由内容驱动，而非硬编码
HTML非法嵌套在断点切换后暴露结构缺陷
很多 HTML 结构问题平时不显形，一加媒体查询就突然错位或样式失效。根源是浏览器解析时静默修正了非法嵌套（如 <p><div>xxx</div></p>），而断点切换触发重排时，修正后的 DOM 树与 CSS 选择器预期不再匹配。
- 打开 Chrome DevTools → Elements 面板，右键任意节点 → “Edit as HTML”，敲个空格再回车：如果整个块跳到其他位置，说明原始嵌套违法
- 执行
document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el); })，那些没父节点的元素就是被浏览器“踢出来”的，它们在断点切换后更易失联 - W3C Validator（validator.w3.org）是唯一能准确定位嵌套错误的工具；粘贴片段后，优先修复第一条
Element div not allowed as child of element p类报错 - 特别注意
<table>内部：漏写<tr>或把<div>直接塞进<td>，在桌面断点下可能勉强显示，小屏下 table 自动换行+重排就会彻底崩
file:// 协议下 media query matches 始终为 false
本地双击打开 HTML 文件时，window.matchMedia('(min-width: 768px)').matches 返回 false，哪怕窗口明明大于 768px，这是 Chrome 90+ 对 file:// 协议的主动限制，不是代码写错了。
立即学习“前端免费学习笔记（深入）”；
- 必须用 HTTP 服务启动：VS Code 安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”，地址变为
http://localhost:5500/ - 别依赖初始
matches值做一次性判断；所有逻辑都应基于change事件驱动，且监听器需绑定到真实生效的MediaQueryList实例 - 检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在——缺失它会导致移动端强制以桌面视口渲染，断点永远不触发 - 用
ResizeObserver辅助验证：监听容器宽度变化，对比matchMedia结果是否同步，可快速区分是协议问题还是逻辑问题
