matchMedia 是浏览器原生 API，用于监听媒体查询变化，支持响应视口尺寸、暗色模式、减少动画等环境变化，需注意实例复用、事件清理及 SSR 兼容。
matchMedia 是浏览器原生提供的、用于监听媒体查询状态变化的 API，它让 JavaScript 能够像 CSS 媒体查询一样响应视口尺寸、配色方案（如暗色模式）、横竖屏等环境变化，从而动态切换组件行为或逻辑——无需刷新页面，也不依赖框架的响应式钩子。
监听视口断点，切换组件渲染逻辑
常见场景是 PC 端展示完整导航栏，移动端收起为汉堡菜单。你可以用 matchMedia 判断当前是否进入「移动断点」，然后启用/禁用对应逻辑：
- 创建媒体查询对象，例如
const mql = window.matchMedia('(max-width: 768px)') - 在组件初始化时根据
mql.matches设置初始状态（如isMobile = mql.matches） - 调用
mql.addEventListener('change', handler)监听变化（注意：现代浏览器支持，旧版 IE 需用addListener） - 在 handler 中更新状态，并触发逻辑分支，比如切换事件绑定（移动端加 touchstart，桌面端用 click）、显示隐藏 DOM 元素、或调用不同数据获取策略
响应系统级偏好，适配暗色模式或减少动画
除了尺寸，matchMedia 还支持 (prefers-color-scheme: dark)、(prefers-reduced-motion: reduce) 等系统级媒体查询：
- 监听暗色模式：
const darkMql = window.matchMedia('(prefers-color-scheme: dark)')，在变化时切换组件主题类名、调整 canvas 绘图颜色、或修改 SVG 图标 fill 属性 - 监听动画偏好：
const motionMql = window.matchMedia('(prefers-reduced-motion: reduce)')，若匹配成功，可跳过 CSS transition、禁用轮播自动播放、或用requestAnimationFrame降帧处理动画逻辑 - 建议将这些监听封装成可复用的 hook（如
usePrefersDark()），便于多个组件共享状态
避免重复监听与内存泄漏
每次调用 matchMedia 都返回独立的 MediaQueryList 实例，若在组件多次挂载/卸载中反复添加监听器而未清理，会导致内存泄漏和逻辑错乱：
立即学习“Java免费学习笔记（深入）”；
- 务必在组件销毁（如
beforeUnmount或useEffect cleanup）时调用mql.removeEventListener('change', handler) - 不要对同一查询字符串反复调用
matchMedia创建新实例；可缓存mql实例，或使用单例管理（尤其在工具函数中） - 检查
mql是否已废弃（mql.media为空或mql.onchange === null），避免向无效对象添加监听
与 React/Vue 等框架协同的实用技巧
在声明式框架中，matchMedia 更适合作为「状态源」而非直接操作 DOM：
- React 中可封装自定义 Hook（如
useMediaQuery('(max-width: 1024px)')），内部用useState+useEffect管理监听，返回布尔值供组件条件渲染或逻辑分支 - Vue 3 中可用
onMounted/onBeforeUnmount生命周期配合ref存储mql，或封装为组合式函数useMediaQuery，返回响应式ref - 注意 SSR 场景：服务端无
window，需加判断（如typeof window !== 'undefined'），首次渲染用默认值，客户端 hydrate 后再启动监听
核心在于把媒体查询从 CSS 的「表现层响应」升级为 JS 的「行为层响应」，让组件逻辑真正随环境而变。不复杂但容易忽略细节。
