应优先用 @media (prefers-reduced-motion: reduce) 全局禁用动画，辅以 (max-width: 1024px), (hover: none), (pointer: coarse) 多条件组合检测触屏/低交互设备，并在根选择器设 animation: none !important; transition: none !important 彻底重置。
动画在小屏幕设备上卡顿怎么办
直接关掉它。高负载 CSS 动画（比如 transform + opacity 连续过渡、@keyframes 复杂路径）在低端手机或折叠屏展开/收起瞬间极易掉帧，不是优化能解决的——是硬件和渲染管线扛不住。
- 优先用媒体查询检测
prefers-reduced-motion，这是系统级开关，比分辨率更可靠 - 若必须按尺寸控制，别只看
max-width，加hover: none和pointer: coarse组合判断触屏设备 -
@media (prefers-reduced-motion: reduce)的兼容性已覆盖 Chrome 74+、Firefox 63+、Safari 13.1+，IE 不支持但 IE 本就不支持现代动画
CSS 中如何批量禁用动画而不重写样式
靠 animation 和 transition 的「全局重置」能力，而不是逐个类名加 !important。
- 在根选择器里统一设
animation: none !important和transition: none !important，比在每个组件里加animation: none更省事也更彻底 - 注意：
transition重置要包含所有属性缩写变体，比如transition-property、transition-duration单独设仍可能生效，必须用transition: none - 如果用了 CSS-in-JS（如 Emotion），需确保该媒体查询规则注入在最外层
<style></style>，否则可能被局部作用域覆盖
为什么只用 max-width 切断动画会失效
因为很多“小屏幕”其实是高 DPI 平板横屏（比如 iPad Pro 12.9" 横屏时 width 超过 1024px），而动画卡顿恰恰发生在这种设备上；单靠宽度断点会漏掉真问题设备。
- 典型错误：
@media (max-width: 768px) { * { animation: none; } }—— 完全忽略桌面触屏笔记本、Surface 等设备 - 正确组合：
@media (max-width: 1024px), (hover: none), (pointer: coarse)，三者任一满足即触发禁用 - 不要依赖
device-pixel-ratio做判断：iOS Safari 不支持该媒体特性，且高 DPR 不等于高负载，只是像素密度高
JavaScript 检测后动态关闭动画的风险点
能不用就不用。JS 检测再改 class 或 style 是事后补救，动画可能已触发一两帧，造成闪烁或跳变。
立即学习“前端免费学习笔记（深入）”；
- 如果非要用 JS（比如需要结合用户设置 API），务必在
DOMContentLoaded阶段就完成，不能等到load或 ReactuseEffect，否则首屏动画已执行 - 避免用
getComputedStyle查animation值来判断——返回的是计算值，不反映媒体查询实际生效状态 - 真正要联动 JS 行为时，只读取
window.matchMedia('(prefers-reduced-motion: reduce)')的matches，然后切 class，别动内联样式
最易被忽略的是：动画禁用逻辑必须在 CSSOM 构建早期介入，晚于 HTML 解析完成就来不及了。媒体查询本身是声明式的，比任何 JS 注入都早，别绕远路。
