应使用@media (prefers-reduced-motion: reduce)而非true，因该媒体查询仅支持reduce和no-preference；需显式清除animation/transition、重置transform/opacity终态、降级scroll-behavior，并配合js监听做增强控制而非替代。
直接用 @media (prefers-reduced-motion: reduce) 覆盖关键动画属性，而不是靠 JS 判断或全局清空——后者极易漏掉 inline style、第三方组件、requestAnimationFrame 动画，且无法拦截 WebKit 在低电量模式下的强制跳过行为。
为什么不能写 @media (prefers-reduced-motion: true)
语法错误。该媒体查询只接受两个标准值：reduce 和 no-preference，没有布尔类型。true 会导致整个媒体查询失效，样式完全不加载。Safari、Chrome、Firefox 均按规范实现，不存在兼容性例外。
@media (prefers-reduced-motion: reduce) 里该写什么
仅设 animation: none 不够——transition 仍参与样式计算，transitionend 永不触发；transform 或 opacity 的隐式插值仍可能发生。必须显式补终态 + 清声明：
- 对动效元素写死终态：比如
.spinner { transform: rotate(0deg); } - 清除所有过渡链：
transition: none; animation: none; will-change: auto; - 避免用
!important全局覆盖，优先按组件粒度控制，防止干扰第三方库的内部状态 - 平滑滚动也要降级：
scroll-behavior: auto;，否则 Safari 低电量模式下会卡在半途
JS 监听和 class 切换要不要做
要，但只用于增强控制，不能替代 CSS 层降级。常见错误是每次渲染都调用 window.matchMedia，应只监听一次：
- 用
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); - 绑定
change事件，初始化时手动触发一次回调 - 给
document.documentElement加/删reduced-motion类，CSS 层用html.reduced-motion *统一接管（注意不要用!important冲突基础样式） - iOS 14+ / macOS Monterey 后无需
addListener兼容，旧 Safari 已基本退出主流支持范围
最容易被忽略的是：去掉动画后，文案是否仍可读、布局是否错乱、焦点是否丢失——这说明问题不在动画本身，而在基础可访问性设计上。动画只是表象，结构语义和视觉层次才是根。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
