@media (prefers-reduced-motion: reduce) 是唯一生效写法，浏览器仅识别 reduce 和 no-preference；true/reduced/1 或漏引号均失效，ios safari 要求全小写带双引号；应分层降级动画而非粗暴禁用，并手动监听 matchmedia 降级 js 动画。
@media (prefers-reduced-motion: reduce) 是唯一生效的写法，其他如 true、reduced、1 或漏引号都会被浏览器完全忽略。
为什么 @media (prefers-reduced-motion: true) 完全不生效
浏览器只认两个规范值：reduce 和 no-preference。写成 true、reduced、1，或漏掉英文双引号（比如写成 reduce 而不是 "reduce"），整条媒体查询就会失效——DevTools 里对应样式块会直接灰掉，毫无作用。iOS Safari 尤其严格，必须是全小写 "reduce" 带双引号。
别用 * { animation: none !important } 粗暴禁动画
这样会让下拉菜单突然撑开、模态框闪现、滚动容器失灵，反而破坏可访问性。正确做法是分层降级：
- 纯视觉动画（loading spinner、背景色轮播）：用
animation: none彻底停掉 - 结构过渡（菜单展开、折叠面板）：保留
transition: max-height 0.01s linear或opacity 0.01s，避免布局突变 - hover/focus 动效：显式重置
transform，例如.btn:hover { transform: scale(1); transition: none; } - 关键容器可加
transform: none !important; opacity: 1 !important;，再交由 JS 控制显隐逻辑
JS 动画必须手动监听 matchMedia，CSS 媒体查询管不到它
@media 只影响 CSS 层动画，requestAnimationFrame、gsap.to()、element.animate() 等完全不受控。必须主动监听并降级：
- 用
window.matchMedia("(prefers-reduced-motion: reduce)").matches判断初始状态 - 监听变更：
matchMedia(...).addEventListener("change", handler)（Safari 旧版需用addListener） - 对 JS 动画做“条件执行”而非“条件销毁”，例如轮播中
if (!reducedMotion) { startAutoSlide() } - 骨架屏、轮播图等场景：直接设终态，如
el.style.opacity = "1"; el.style.transform = "none";
移动端必须靠 CSS 媒体查询，JS 初始化判断不可靠
iOS Safari 和部分 Android WebView 存在偏好信号延迟或漏触发问题。window.matchMedia 在页面加载完成前可能返回 false，即使系统已开启「减少动态效果」。CSS 媒体查询是渲染引擎原生监听的，从样式计算阶段就生效，能拦截首帧动画及第三方组件内联样式。
真正难的不是写对那行 @media，而是把所有含 transition、animation、transform、opacity 的地方都筛一遍，并区分哪些该删、哪些该压到毫秒级、哪些必须靠 JS 补位——漏掉一个 :hover 动效，就可能让低配设备用户卡顿或眩晕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
