如何通过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()）需主动干预。