matchmedia 是浏览器原生 api，用于在 javascript 中监听媒体查询变化，弥补 css @media 无法触发 js 逻辑的缺陷；需手动调用回调初始化状态，并在组件卸载时移除监听器以防内存泄漏。
matchMedia 不是编辑器功能，而是浏览器原生 API，它在 HTML 页面中运行，和你用什么编辑器（VS Code、WebStorm 或记事本）无关。直接在 <script></script> 里调用即可生效。
为什么不能只靠 @media CSS 规则？
纯 CSS 媒体查询能自动响应视口变化，但无法触发 JavaScript 逻辑——比如动态加载模块、切换数据源、上报设备类型、或初始化不同 UI 组件。这时必须用 matchMedia 把媒体状态“拉进 JS”。
- 常见错误：用
window.innerWidth一次性取值判断屏幕尺寸，结果窗口缩放或横竖屏切换后逻辑不更新 - 正确做法：用
matchMedia创建可监听的媒体查询对象，配合addEventListener("change", handler) - 注意：IE10+ 支持，但 IE11 不支持
addEventListener，需回退到addListener（已废弃但兼容性必需）
如何用 matchMedia 监听 min-width 断点并执行布局切换
匹配 (min-width: 768px) 表示“进入平板及以上尺寸”，适合触发侧边栏展开、导航栏横向排列等行为。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
const mediaQuery = window.matchMedia("(min-width: 768px)");
function handleTabletLayout(e) {
if (e.matches) {
document.body.classList.add("layout-tablet");
initSidebar(); // 启动侧边栏逻辑
} else {
document.body.classList.remove("layout-tablet");
destroySidebar(); // 清理资源
}
}
handleTabletLayout(mediaQuery); // 立即执行一次，避免首次加载遗漏
mediaQuery.addEventListener("change", handleTabletLayout);
- 必须手动调用一次
handleTabletLayout(mediaQuery)，否则页面加载时不会触发初始状态 - 不要在
change回调里重复调用matchMedia，会造成监听嵌套和内存泄漏 - 多个断点建议拆成独立
matchMedia实例，避免条件耦合（如不用(min-width: 768px) and (max-width: 1023px)）
matchMedia 与 CSS @media 的协作边界在哪
CSS 负责视觉样式，JS 负责行为逻辑，两者不该重复控制同一维度。例如：
- ✅ 正确分工：
@media (max-width: 480px)隐藏.sidebar；matchMedia("(max-width: 480px)")暂停其定时器、卸载地图组件 - ❌ 错误混用：用 CSS 控制
display，又用 JS 反复设置style.display = "none"—— 冲突且不可维护 - ⚠️ 注意：CSS 中的
@media screen and (prefers-reduced-motion)也可被matchMedia监听，用于降级动画，这点常被忽略
真正容易被绕开的是销毁监听器。如果组件卸载（比如单页应用路由跳转），不调用 mediaQuery.removeEventListener("change", handler)，旧回调仍会执行，可能操作已不存在的 DOM 节点，报 Cannot read property 'xxx' of null 错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
