直接用 window.matchmedia('(prefers-reduced-motion: reduce)') 获取 mediaquerylist 实例，通过 mql.matches 读取当前状态，用 mql.addeventlistener('change', handler) 监听变更，复用实例、及时销毁监听、ssr 时判空 window，并分级降级动效。
matchMedia 监听 prefers-reduced-motion 的基本写法
直接用 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 模拟的淡入。
