必须用@media (prefers-reduced-motion: reduce)主动降级，因其仅接受reduce和no-preference两个规范值，写true、漏引号或大小写错误均导致语法失效；应分层压缩动画时长、保留结构过渡并配合js监听响应。
必须用 @media (prefers-reduced-motion: reduce) 主动降级，写 true 或漏引号会直接失效。
为什么 @media (prefers-reduced-motion: true) 不工作
这个媒体查询只接受两个规范值：reduce 和 no-preference，没有布尔类型。写成 true、1 或不加引号的 reduce 都是语法错误，整条规则会被浏览器忽略，样式完全不生效。
macOS、Windows 10+、iOS 系统设置触发的都是 reduce，不是开关量——它是个用户意图信号，不是 JS 变量。
- 检查 DevTools 的 Styles 面板，如果媒体查询块灰掉或没高亮，大概率是值写错了
- 真机测试时 iOS Safari 对语法更严格，
reduce必须带英文引号且全小写
怎么安全禁用动画而不破坏功能
粗暴加 * { animation: none !important; transition: none !important; } 会让模态框闪现、下拉菜单突然撑开、滚动容器失去可滚动性——这不是无障碍，是功能阉割。
正确做法是分层压缩时长、保留结构逻辑：
- 用
animation-duration: 0.01ms !important替代animation: none，关键帧仍执行但几乎瞬时完成 - 对依赖
max-height或opacity过渡维持可访问性的组件（如折叠菜单），单独保留transition: max-height 0.1s linear - 强制视觉属性瞬时切换：
* { opacity: 1 !important; transform: none !important; }，再由 JS 控制显隐状态 - 禁用平滑滚动：
html { scroll-behavior: auto !important; }
JS 动画怎么响应偏好变化
CSS 媒体查询管不到 requestAnimationFrame、GSAP、Canvas 或轮播组件的自动播放。必须手动监听并降级：
- 初始化时获取状态：
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") - 监听变化（Safari 14+ 支持）：
motionQuery.addEventListener("change", handleMotionChange) - 动画启动前判断：
if (!motionQuery.matches) { startParallax() }，不要运行中暂停再恢复 - 对骨架屏、旋转
.spinner等场景，直接设终态：el.style.opacity = "1"; el.style.transform = "none";
测试时最容易漏掉的三件事
开发阶段仅在 Chrome DevTools Rendering 面板勾选 “Reduced motion” 不够：
- iOS Safari 对
prefers-reduced-motion响应更严格，某些自定义滚动条动画会被静音，必须真机验证 - 第三方 UI 库（如 Bootstrap、Headless UI）的动效可能绕过你的 CSS 规则，要检查其 class 命名和内联 style 行为
- 别忘了
scroll-behavior: smooth是独立属性，需单独重置为auto，它不会被通用transition: none覆盖
最常被忽略的是：动画降级后，焦点管理、键盘导航路径、滚动容器的 overflow 行为是否依然成立——这些比“有没有动”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
