如何通过window.matchMedia在脚本中实现系统尺寸变化的实时响应？

本文共计824个文字，预计阅读时间需要4分钟。

使用 `window.matchMedia` 查询系统减少动态效果开启状态，是最轻量级、最标准的方式。它返回一个 `MediaQueryList` 对象，支持使用 `addEventListener`（注意不是 `onchange`）实时响应系统设置变化。

关键点：媒体查询字符串必须是 (prefers-reduced-motion: reduce)，不能漏括号，也不能写成 reduced 或 yes —— 浏览器只认 reduce 这个值。

• 首次检查用 mql.matches 获取当前状态
• 监听变更必须用 mql.addEventListener('change', handler)，旧版 Safari 也支持，无需降级到 addListener
• 不要在每次动画前重复调用 matchMedia，复用同一个 MediaQueryList 实例即可

如何在动画逻辑中安全跳过或降级动效

拿到 matches === true 时，不是简单“禁用所有动画”，而是要按场景分级处理：CSS 动画可交由 @media (prefers-reduced-motion: reduce) 控制；JS 驱动的动画（如 requestAnimationFrame、gsap.to、element.animate()）需主动干预。

• 使用 element.animate() 时，若 mql.matches 为 true，改用 element.style.transform = '...' 等瞬时赋值
• 封装动画函数时，把 duration 和 easing 设为可选参数，并在 reduced motion 下强制设为 0 或 'linear'
• 避免在 change 回调里触发重绘密集操作（比如批量重排 DOM），仅更新控制变量或标记位

容易被忽略的兼容性与生命周期问题

window.matchMedia 在 IE 中完全不可用，但现代项目基本已不考虑 IE；真正容易出错的是监听未销毁导致内存泄漏，以及 SSR 环境下服务端执行时报 ReferenceError: window is not defined。

• React/Vue 组件卸载时，务必调用 mql.removeEventListener('change', handler)（Vue 3 的 onBeforeUnmount、React 的 useEffect 清理函数里做）
• Next.js / Nuxt 等 SSR 框架中，初始化 matchMedia 前先判断 typeof window !== 'undefined'
• Safari 14+ 才支持 addEventListener，但 addListener 已废弃，且 Safari 15.4+ 已全面支持新 API，无需兼容旧写法

验证是否生效的快速调试方法

别等用户反馈——开发阶段就该手动触发系统设置变化并观察行为。macOS 和 Windows 都提供快捷入口，但更可靠的是用浏览器开发者工具模拟。

• Chrome / Edge：打开 DevTools → ⚙️ Settings → Preferences → Accessibility → 勾选 “Reduced motion”
• Firefox：地址栏输入 about:config → 搜索 ui.prefersReducedMotion → 双击设为 1
• 代码中加一句 console.log('reduced motion:', mql.matches) 到 change 回调里，切换设置时立刻看到输出

真正难处理的不是监听本身，而是已有动画逻辑散落在各处组件里。建议从公共动效 Hook 或 UI 组件库入手统一收口，否则容易漏掉某个 setTimeout 模拟的淡入。