必须用@media (prefers-reduced-motion: reduce)主动降级，因其仅接受reduce和no-preference两个规范值，写true会语法错误致样式失效；粗暴禁动画破坏模态框焦点等关键功能，应分层控制动画时长、保留结构过渡并配合js监听响应。
必须用 @media (prefers-reduced-motion: reduce) 媒体查询主动降级，不能只靠 JS 检测或全局禁动画——否则会破坏模态框焦点、滚动容器可访问性等关键行为。
为什么不能写 @media (prefers-reduced-motion: true)
语法错误。prefers-reduced-motion 只接受两个规范值：reduce 和 no-preference，没有 true 或 false。写错会导致整个媒体查询失效，样式完全不生效。macOS、Windows 10+、iOS 系统设置触发的都是 reduce，不是布尔值。
如何安全禁用 CSS 动画而不破坏功能
粗暴加 * { animation: none !important; transition: none !important; } 会让下拉菜单突然展开、模态框闪现、滚动条跳变，反而损害可访问性。正确做法是分层控制：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
animation-duration: 0.01ms !important替代animation: none，保留关键帧逻辑但压缩到几乎瞬时 - 对依赖过渡维持结构的行为（如
max-height展开菜单），单独保留transition: max-height 0.1s linear，避免内容被截断 - 强制
opacity和transform瞬时切换：在媒体查询里加* { opacity: 1 !important; transform: none !important; }，再由 JS 控制显隐 - 禁用
scroll-behavior: smooth：加html { scroll-behavior: auto !important; }
JS 动画怎么响应偏好变化
CSS 媒体查询管不到 requestAnimationFrame、GSAP、Canvas 或轮播组件的自动播放。必须手动监听并降级：
- 初始化时用
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")获取当前状态 - 不要只检查一次——需监听变化：
motionQuery.addEventListener("change", handleMotionChange)（Safari 14+ 支持；旧版需轮询） - 动画启动前判断：
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 是否被
!important覆盖 - 内联样式（如 React 的
style={{ animation: "..." }}）不受 CSS 媒体查询影响，必须在 JS 层做条件判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
