@media (prefers-reduced-motion: reduce) 在移动端失效主因是css写法错误：未在基础选择器声明transition/animation，导致浏览器无法插值；且值书写不规范（如true、reduce、空格错误）会使规则被忽略。
为什么 @media (prefers-reduced-motion: reduce) 在移动端经常失效
根本不是“移动端特殊”，而是写法违反了 CSS 插值前提：浏览器只在起始态和结束态都声明了同一组 transition 或 animation 时，才启用平滑过渡；否则直接硬切。常见错误是只在 :hover、.is-open 或第三方组件类（如 .ant-collapse-content-active）里写动画，基础选择器里空着——结果就是移出/收起时跳变，@media 根本没机会介入。
另外，移动端 Safari 和 Chrome 对媒体查询语法更敏感：prefers-reduced-motion: true 是非法值；Reduce（首字母大写）、漏引号、空格不规范（如 reduce )），都会让整条规则被忽略。DevTools 的 Styles 面板里若该媒体查询块灰掉，基本可判定是值写错了。
必须在基础选择器中声明 transition 和 animation
比如折叠菜单用 max-height 过渡，不能只在展开态写：
.collapse-content.is-open { max-height: 300px; transition: max-height 0.3s ease-in-out; }
而要先在基础态声明：
.collapse-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .collapse-content.is-open { max-height: 300px; }
这样 @media (prefers-reduced-motion: reduce) 才能生效，并把 transition-duration 降为 0.01ms 而非彻底移除——既满足无障碍要求，又避免 DOM 状态错乱（如 height 突然归零导致内容截断）。
-
transform、opacity、max-height这三类属性最常被遗漏重置 - 仅设
animation: none不够，需同步处理transform: none !important和opacity: 1 !important - 禁用平滑滚动：
html { scroll-behavior: auto !important; }
移动端 JS 动画必须手动监听偏好变化
CSS 媒体查询对 requestAnimationFrame、轮播自动播放、GSAP 或 Canvas 动画完全无效。必须用 JS 主动响应：
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); function handleMotionChange(e) { if (e.matches) { stopParallax(); pauseAutoSlide(); } else { startParallax(); resumeAutoSlide(); } } motionQuery.addEventListener("change", handleMotionChange); // 初始化时也要调用一次 handleMotionChange(motionQuery);
注意：不要在动画运行中“暂停再恢复”，而是彻底停止或换用静态状态切换（如用 classList.toggle 控制显隐）。
- Safari 14+ 支持
change事件，旧版需轮询motionQuery.matches - 轮播组件的自动播放、视差滚动、粒子效果等，都得单独判断
motionQuery.matches - 初始化判断比监听更重要——很多页面首次加载就已触发动画
推荐的移动端降级策略：分层压缩而非一刀切
直接 animation: none 容易破坏交互反馈逻辑，尤其对依赖动画完成才触发后续动作的组件（如表单验证提示、抽屉关闭回调）。更稳妥的做法是分层压缩：
- 关键帧动画：用
animation-duration: 0.01ms !important替代none，保证动画逻辑仍执行，只是几乎瞬时完成 - 过渡动画：保留
transition: max-height 0.1s linear或opacity 0.1s，避免内容闪现或布局跳动 - 视觉位移：强制
transform: none !important，但由 JS 控制显隐状态（如display: none或visibility: hidden） - 字体/文字动画：小屏下优先降级为淡入（
opacity）而非位移，避免vw单位在窄屏上过度偏移
真正容易被忽略的，是那些没写在基础选择器里的动画——它们在减少动画模式下不会被媒体查询捕获，也不会被 JS 监听覆盖，只会静默失效或突兀跳变。检查时重点看 hover、focus、第三方类名里的 transition，而不是 media query 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
