移动端应优先用@media (prefers-reduced-motion: reduce)主动降级背景动画，设animation/transition/background-image为none并补终态样式；小屏需额外禁用fixed背景、简化动效；JS层须监听motion变化并停止Canvas/SVG等动态背景；避免visibility/display等伪隐藏，直接置background-image: none。
在移动端媒体查询中屏蔽不必要的复杂背景动画，核心不是“等卡了再关”，而是提前识别设备能力与用户偏好，用语义化、分层的策略主动降级。重点在于避免依赖屏幕尺寸硬切，转而结合系统设置、渲染限制和轻量兜底。
优先响应 prefers-reduced-motion 系统偏好
这是最可靠、最语义化的第一道防线。iOS 低电量模式、Android 辅助功能、Windows/macOS 可访问性设置都会触发该媒体查询，比任何 UA 或宽度判断都贴近真实需求。
- 所有含 background-image 配合 animation 或 transition 的规则，必须包裹在：
@media (prefers-reduced-motion: reduce) { ... } - 内部统一设为：
animation: none; transition: none; background-image: none; - 补终态样式，防止动画中断后元素错位或残留透明度：
opacity: 1 !important; transform: none !important;
小屏设备主动轻量化背景动效
仅靠 prefers-reduced-motion 不够——很多低端安卓机没开该设置，但依然跑不动 CSS 动画。需在常见移动端断点（如 max-width: 768px）中主动简化：
- 禁用
background-attachment: fixed：移动端渲染不稳定，易导致滚动卡顿或背景错位，统一改用scroll - 替换 CSS 动画为静态背景或极简过渡：
例如把background-position: 0 0; animation: pan 20s linear infinite;改为单帧background-position: center; - 若必须保留轻微动效，用
transform: translate()替代background-position动画，更易触发合成层且性能更好
JS 层同步拦截不可控的动态背景
CSS 媒体查询管不到 JS 启动的 Canvas 背景、SVG 动画或滚动视差背景。必须手动监听并降级：
立即学习“前端免费学习笔记（深入）”；
- 初始化时读取：
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") - 监听变化：
motionQuery.addEventListener("change", () => { if (motionQuery.matches) stopBackgroundAnimation(); }) - 对骨架屏、加载背景、视差容器等，直接设终态：
el.style.backgroundImage = "none"; el.style.transform = "none";
避免常见无效隐藏方式
这些做法看似“隐藏”，实则仍加载资源、占内存、拖慢渲染：
- ❌
visibility: hidden或opacity: 0：图片照常下载，GPU 纹理照常生成 - ❌
display: none后又用 JS 切回：可能造成布局抖动，且首次加载未规避 - ❌ 保留
background-size/background-position等冗余属性：无图时它们无意义，还可能干扰渲染流水线 - ✅ 正确做法：媒体查询中直接写
background-image: none;，干净利落，不加载、不解析、不合成
