prefers-reduced-motion 检测异常主因是系统设置未真正生效、浏览器模拟开关未启用、CSS 媒体查询语法错误（必须带括号和冒号）、未手动禁用 transition（需用 transition: none），且 :hover 伪类在触摸设备上不触发，应统一在根级选择器中处理降级。
prefers-reduced-motion 检测异常，通常不是 CSS 写错了，而是浏览器没按预期响应系统设置——比如 macOS 或 iOS 用户开了“减少动画”，但你的 transition 仍照常播放，或者反过来，没开偏好却触发了降级。
确认系统偏好是否真正生效
很多开发者直接在开发机上改系统设置就以为万事大吉，但实际有三个常见断点：
- macOS：需在「系统设置 → 辅助功能 → 显示 → 减少动态效果」中开启，仅开「降低透明度」或「增加对比度」不触发
prefers-reduced-motion: reduce - iOS/iPadOS：必须进入「设置 → 辅助功能 → 动态效果 → 减少动态效果」，Safari 不读取「辅助功能快捷键」临时开启的状态
- Chrome / Edge 浏览器本身也提供模拟开关：DevTools → Rendering → «Emulate
prefers-reduced-motion»，选reduce才算真实触发，no-preference是默认值，不是“关闭”
媒体查询写法必须带括号且用冒号
错误写法：@media (prefers-reduced-motion) 或 @media prefers-reduced-motion: reduce —— 这两种都不合法，会被整个忽略。
正确写法只有两种：
立即学习“前端免费学习笔记（深入）”；
-
@media (prefers-reduced-motion: reduce) { ... }（针对已启用减少动画的用户） -
@media (prefers-reduced-motion: no-preference) { ... }（针对未启用、或系统不支持该特性的情况）
注意：no-preference 不等于“动画开启”，它只是“未声明偏好”，旧浏览器（如 IE、Android 4.4 WebView）也会匹配这条规则。所以别把它当“动画专用区”用。
transition 不会自动被禁用，得你手动关
这是最常被忽略的一点：prefers-reduced-motion 不会静默覆盖你的 transition，它只提供一个上下文，你得主动用媒体查询把过渡干掉。
典型修复模式：
button {
transition: transform 0.3s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
button {
transition: none;
}
}
如果只写 transition: unset 或 transition: initial，某些浏览器（尤其是 Safari 16–17）会回退到默认值 all 0s ease 0s，反而导致闪动。用 none 最稳妥。
:hover + transition 组合在触摸设备上失效
桌面端鼠标悬停能触发 :hover，但 iOS 和 Android 的 Safari/Chrome 默认不触发 :hover 伪类（除非用户真用了鼠标），所以即使写了 @media (prefers-reduced-motion: reduce)，那段 button:hover { transition: none } 可能根本没执行。
更可靠的做法是把降级逻辑从交互伪类里抽出来：
- 不要依赖
:hover或:focus内部写transition: none - 所有动画控制统一放在根级选择器 + 媒体查询中，例如：
button, .card, [role="tab"] { transition: … }，再用@media (prefers-reduced-motion: reduce)批量关掉 - 若必须区分 hover 进/退动画节奏，用
transition-duration: 0.01s代替none，避免 Safari 对none的兼容性抖动
真正难调的不是语法，而是你得同时盯着系统设置、浏览器模拟开关、CSS 作用域和设备输入类型——四个地方只要一个没对齐，prefers-reduced-motion 就像没写一样。
