正确写法是@media (prefers-reduced-motion: "reduce")，需严格匹配大小写与英文引号；仅设animation: none会破坏交互，应同步重置transition-duration、scroll-behavior，并手动降级JS动画。
直接用 @media (prefers-reduced-motion: reduce) 就能检测用户是否开启了系统级“减少动画”偏好，无需 JavaScript，所有现代浏览器都支持。但只加这一行远远不够——很多页面加了之后反而出现下拉菜单卡死、模态框失焦、滚动条失效等问题，根源在于只动了 animation，漏掉了 transition、scroll-behavior 和 JS 动画逻辑。
为什么 @media (prefers-reduced-motion: reduce) 写不对就完全不生效
这个媒体查询只接受两个规范值：reduce 和 no-preference，大小写敏感、必须带英文引号。写成 prefers-reduced-motion: true、reduce 不加引号、或 Reduce 都是语法错误，整条规则会被浏览器静默忽略。
- 在 Chrome/Firefox DevTools 的 Styles 面板里，如果该媒体查询块呈灰色或未高亮，大概率是值写错了
- iOS Safari 对语法最严格：必须是
(prefers-reduced-motion: "reduce")（注意引号） -
no-preference不等于false，它表示“用户没做选择”，不是布尔值，不能用于 JS 条件判断
只设 animation: none 会导致交互异常
粗暴写 * { animation: none !important; transition: none !important; } 看似简单，实际会破坏功能：折叠菜单突然撑开、模态框闪现、滚动容器失去可滚动性。这不是无障碍，是功能阉割。
- 真正可靠的方式是把动画时长压到几乎为零：
animation-duration: 0.01ms !important，而不是0s（某些浏览器会将0s解释为“继承”） - 必须同步重置
transition-duration，因为大量交互动效靠的是transition而非@keyframes - 禁用平滑滚动：
html { scroll-behavior: auto !important; }，否则用户滚动时仍会触发插值计算 - 对依赖
max-height或opacity过渡维持可访问性的组件（如手风琴菜单），应单独保留：[aria-expanded="true"] { transition: max-height 0.1s linear; }
JS 动画必须手动监听和降级
CSS 媒体查询管不到 requestAnimationFrame、GSAP、Lottie、Canvas 或轮播组件的自动播放。不处理这些，用户开启“减少动画”后，JS 动画照常运行，CSS 层面的禁用形同虚设。
立即学习“前端免费学习笔记（深入）”；
- 初始化时读取状态：
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") - 监听变化（Safari 14+ 支持）：
motionQuery.addEventListener("change", handleMotionChange)；旧版需首次加载后立即执行一次 handler - 不要在动画运行中暂停再恢复，而应在启动前判断：
if (!motionQuery.matches) { startParallax() } - 骨架屏、旋转
.spinner等场景，直接设终态：el.style.opacity = "1"; el.style.transform = "none";，避免残留动画帧
最难的不是加一行媒体查询，而是区分哪些动画属于“功能必需”（比如菜单展开的 max-height 过渡保障可滚动性）、哪些只是“锦上添花”（比如背景粒子）。前者要保留极简过渡，后者直接移除。这个判断没法自动化，得逐个组件过一遍。
