必须成对修改background-size和background-position，否则小屏位移范围塌缩致动画失效；需用百分比或calc()动态适配，避免px硬编码，并确保渐变方向与size轴向匹配。
响应式背景渐变动画不能靠“自适应”自动生效，必须手动在媒体查询中重设 background-size 和 background-position 的值，否则小屏上位移范围塌缩、动画卡顿或完全不可见。
为什么媒体查询里改 background-position 会失效
常见错误是只写 @media (max-width: 768px) { .box { background-position: 50% 50%; } } 却没同步调整 background-size。如果 PC 端用的是 background-size: 400% 100%，而移动端没重设，那 background-position: 100% 50% 实际可位移距离只剩容器宽度的 25%，视觉上几乎不动。
- 必须成对修改：
background-size和background-position要在同一条媒体查询规则里声明 - 推荐用百分比单位（如
50% 50%），避免px或rem在不同视口下失准 - 不要依赖
transition过渡后再被媒体查询覆盖——媒体查询是离散重绘，不是连续动画
移动端位移不生效？先查这三处
iOS Safari 和部分安卓 WebView 对 background-position 百分比计算有差异，尤其当容器宽高未显式设定时。真机测试前务必确认：
-
background-repeat没设成no-repeat（默认值）——它会裁掉超出部分，导致位移“看不见”。改成repeat或留空更稳妥 - 容器高度是否明确？
background-position: 100% 50%中的百分比需以容器尺寸为基准，flex 子项若没设height或aspect-ratio，计算会漂移 -
background-clip是否为padding-box？border-box在圆角大时可能裁切渐变边缘，暴露色块断层
用 calc() 动态算位移，比写死更可靠
硬编码 background-position: 20px 30px 在响应式场景下极易失控。用 calc() 结合视口单位能实时适配：
- 写法必须带空格：
calc(100% - 20px)✅，calc(100%-20px)❌（浏览器忽略） - 想让渐变中心始终贴右下角：PC 端用
background-position: calc(100% - 20px) calc(100% - 20px)，移动端改calc(100% - 10px) -
vw/vh可参与计算，如background-position: calc(50vw + 10px) 50%，但旧版安卓 WebView 不支持，需降级兜底
animation-fill-mode 和首尾帧衔接容易被忽略
动画循环时出现“跳帧”或“回弹”，往往不是关键帧写错，而是没处理好状态延续性：
-
animation-fill-mode: forwards必须显式声明，否则动画结束后background-position会瞬间回退到初始值 - 无限循环动画必须写
animation-iteration-count: infinite，不能用大数字（如999）替代——本质仍是有限次，长时间运行可能提前终止 - 首帧和末帧必须视觉一致：
0% { background-position: 0% 50%; } 100% { background-position: 0% 50%; }，中间用50%做峰值位移，才能平滑衔接
最常漏掉的是渐变方向与 background-size 轴向的匹配——比如用 to bottom 渐变却设 background-size: 100% 400%，那就要动画 background-position: 50% 0% → 50% 100%；方向和尺寸轴没对齐，位移就“跑偏”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
