@media (prefers-reduced-motion: reduce) 有效写法仅为此形式；需同时设 transition: none; animation: none; will-change: auto; 并配合 JS 监听打标 html 类名以确保全覆盖。
prefers-reduced-motion媒体查询怎么写才有效
直接写 @media (prefers-reduced-motion: reduce)，别加引号以外的符号，也别写成 (prefers-reduced-motion: true) 或 (prefers-reduced-motion) —— 这两种都无效。这个媒体特性只有两个合法值：reduce 和 no-preference，不是布尔类型。系统未开启“减少动画”时默认是 no-preference，只有用户主动开启才会触发 reduce 分支。
为什么只设animation: none不够
transition 是独立于 animation 的机制，即使清掉所有 @keyframes 和 animation 声明，只要元素有 transition 属性，悬停、焦点或 class 切换时仍会触发动画计算，甚至导致 transitionend 事件永不触发（尤其在 Safari 中）。更隐蔽的问题是：隐式插值仍会发生——比如 transform 或 opacity 在状态切换时自动补间，哪怕没写 transition，浏览器也可能基于历史声明做推断。
- 必须同时覆盖
transition、animation、will-change - 推荐写法：
transition: none; animation: none; will-change: auto; - 避免用
!important全局覆盖，否则可能干扰第三方组件内部状态（如 React 组件的动画逻辑）
transition降级时保留基础反馈的实操建议
完全移除所有过渡会让交互显得生硬，尤其按钮点击、菜单展开这类操作。可保留极简反馈，但要控制范围和时长：
- 只对
opacity做0.1s级别的过渡，不叠加transform、background-color等多属性 - 慎用
opacity: 0→ 容易被识别为闪烁，改用visibility: hidden+height: 0+overflow: hidden更稳妥 - 平滑滚动也要降级：
scroll-behavior: auto，否则 Safari 在低电量模式下会卡在半途
JS监听与类名联动要注意什么
纯 CSS 方案覆盖不到动态插入的元素或 JS 驱动的动画，需要用 window.matchMedia 主动监听并打标：
立即学习“前端免费学习笔记（深入）”；
- 监听代码要放在初始化阶段，不能只执行一次：
const mql = window.matchMedia('(prefers-reduced-motion: reduce)'); - 监听回调里建议给
<html>加类名（如reduced-motion），而不是全局切样式，便于后续组件按需适配 - 注意 SSR 场景：服务端无法读取该媒体查询，首次渲染需预留客户端 hydrate 后的修正逻辑
真正麻烦的不是写几行 CSS，而是确保 transition 链被彻底切断——从声明、计算到渲染，每个环节都可能漏掉一环。尤其当多个第三方库共存时，will-change 和 transform 的隐式行为最容易被忽略。
