prefers-reduced-motion 是检测系统“减少动画”偏好的 css 媒体查询，移动端更需重视因其关乎晕动症、注意力障碍与续航；须用 !important 全局重置 animation/transition 时长至 0.01ms，并主动监听 js 动画。
prefers-reduced-motion 是什么，为什么移动端尤其需要它
prefers-reduced-motion 是一个 CSS 媒体查询特性，用于检测用户是否在系统级开启了“减少动画”偏好（比如 iOS 的“降低动态效果”或 Android 的“移除动画”）。移动端用户开启该选项的比例远高于桌面端——不只是因为性能顾虑，更多是出于晕动症、注意力障碍或电池续航等真实需求。忽略它，意味着你的淡入、缩放、滚动视差等动画会在用户明确拒绝的情况下强行播放，直接损害可访问性与信任感。
怎么写才能真正生效，而不是只加个媒体查询
常见错误是只写 @media (prefers-reduced-motion: reduce) { ... }，但没覆盖关键属性，或被其他样式优先级压过。必须用 !important 强制重置，且覆盖范围要够广：
- 所有
animation相关属性：至少设animation-duration: 0.01ms（不能设0s，否则某些浏览器会跳过过渡）和animation-iteration-count: 1 - 所有
transition相关属性：同样设transition-duration: 0.01ms，避免 hover 或 JS 触发的过渡残留 - 避免只作用于某几个类名，推荐通配符起步：
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }，再按需白名单放开（如 loading 动画可保留）
移动端适配时容易漏掉的三个地方
很多团队只处理了首屏动画，却在以下场景继续触发非必要动画：
-
scroll-behavior: smooth—— 页面内锚点跳转默认带滚动动画，在prefers-reduced-motion下应设为auto - 第三方组件库的默认动效（如 Bootstrap 的 collapse、React Spring 的默认配置），需检查其是否支持该媒体查询，或手动覆写
- JavaScript 控制的
requestAnimationFrame动画，无法被 CSS 媒体查询拦截，需用window.matchMedia('(prefers-reduced-motion: reduce)').matches主动判断并跳过
要不要在开发阶段模拟测试
要，而且必须做。Chrome 和 Safari 都支持在开发者工具里强制启用 prefers-reduced-motion（Chrome：Rendering 面板 → Emulate CSS media feature → prefers-reduced-motion；Safari：Develop → Rendering → Reduce Motion）。别依赖“用户开了我再修”的侥幸心理——上线后才发现导航栏折叠动画卡死，修复成本远高于开发期验证一次。
最常被忽略的是：这个设置影响的不只是“有没有动画”，而是整个交互节奏。比如一个靠 transform + transition 实现的侧滑菜单，在 reduced motion 下如果只停在 0.01ms，可能根本来不及完成位移，导致菜单不可见或错位。这时候得配合 JS 检测，直接切到无动画的 class 切换逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
