@media (prefers-reduced-motion: reduce) 生效需满足三要素：媒体查询值必须为全小写带英文双引号的"reduce"；transition 必须声明在基础选择器（如 .card）而非仅:hover或.is-open中；动画降级需分层处理，禁用纯视觉动画、保留结构过渡毫秒级时长、js 动画须手动监听 matchmedia。
必须把 transition 写在基础选择器里，@media (prefers-reduced-motion: reduce) 才能真正生效；否则悬停、展开等交互一移开就跳变，不是 bug，是 CSS 插值机制决定的。
为什么 @media (prefers-reduced-motion: true) 完全不工作
浏览器只认两个规范值：reduce 和 no-preference。写成 true、1、reduced（漏掉引号或大小写错误），整条媒体查询就会被忽略——DevTools 里对应样式块直接灰掉，毫无作用。iOS Safari 尤其严格，必须是全小写带英文双引号："reduce"。
transition 必须声明在默认状态，不能只藏在 :hover 或 .is-open 里
浏览器做插值动画时，需要起始态和结束态都存在同一组 transition 声明。如果只在 .card:hover 里写 transition: transform 0.3s，那鼠标移出时没有声明可回退，只能硬切，@media 根本没机会介入。
-
.card必须先定义transition: transform 0.3s, opacity 0.3s - 再在
@media (prefers-reduced-motion: reduce)中统一设为transition: none - 悬停类只需改属性值，比如
.card:hover { transform: scale(1.05); }，不重复写transition
别用 * { animation: none !important } 粗暴禁用
这样会让下拉菜单突然撑开、模态框闪现、滚动容器失灵，反而破坏可访问性。正确做法是分层降级：
- 纯视觉动画（loading spinner、背景色轮播）：用
animation: none彻底停掉 - 结构过渡（菜单展开、折叠面板）：保留
transition: max-height 0.01s linear或opacity 0.01s，避免布局突变 - hover/focus 动效：显式重置，例如
.btn:hover { transform: scale(1); transition: none; } - 关键容器加
transform: none !important; opacity: 1 !important;，再交由 JS 控制显隐逻辑
JS 动画必须手动监听 matchMedia，CSS 媒体查询管不到它
@media 只影响 CSS 层动画。requestAnimationFrame、gsap.to()、element.animate() 完全不受控，必须主动监听并降级：
- 初始化判断：
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") - 监听变更：
motionQuery.addEventListener("change", handler)（Safari 14+ 支持） - 动画启动前加条件：
if (!motionQuery.matches) { startParallax() }，不要运行中暂停再恢复 - 骨架屏、轮播图等场景：直接设终态，如
el.style.opacity = "1"; el.style.transform = "none";
最难的不是写对那一行 @media，而是把所有含 transition、animation、transform、opacity 的地方筛一遍，并区分哪些该删、哪些该压到毫秒级、哪些必须靠 JS 重置——漏掉任意一处，都可能在真机上造成跳变或功能异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
