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