@media 内嵌套 @keyframes 无效，因 css 规范禁止；应全局定义动画，用 media 控制 animation: none 来禁用，优先处理 prefers-reduced-motion 以保障可访问性。
用 @media 套住 @keyframes 无效？别这么干
直接写 @media (max-width: 768px) { @keyframes fade { ... } } 不起作用——CSS 规范里明确禁止在媒体查询内嵌套 @keyframes。浏览器会忽略整个规则块，动画照常播放，你却查不到报错。
正确做法是把动画定义保留为全局，改用媒体查询控制触发它的属性：
- 把
animation或animation-name设为none - 或者干脆移除
animation相关声明（更稳妥） - 确保该规则的 CSS 选择器优先级不被其他样式覆盖
animation: none 和 animation: initial 有区别吗？
有。前者明确禁用所有动画，后者重置为初始值（animation: none 0s ease 0s 1 normal none running both），效果一样，但 none 更直白、意图更清晰。
实操建议：
- 小屏下统一用
animation: none，避免歧义 - 如果用了
animation-play-state: paused，它只暂停不取消，仍占渲染资源；必须配animation: none才真正停掉 - 注意：
animation: none不影响已内联的style属性，JS 动态加的动画需同步清理
为什么加了 @media 还在 iPhone 上闪一下才停？
这是常见视觉残留：动画在媒体查询生效前已开始一帧，尤其在页面加载或横竖屏切换瞬间。根本原因是 CSS 媒体查询响应有延迟，而动画启动几乎是即时的。
缓解方案：
- 给关键元素加
animation: none !important，提高优先级 - 在
中尽早插入响应式动画禁用样式，比 JS 注入更及时 - 若用 JS 控制，监听
resize和orientationchange，但别只靠它——CSS 层面必须兜底
要不要用 prefers-reduced-motion 一起处理？
要。这不是“锦上添花”，而是可访问性硬需求。很多用户手动开启系统级减少动画，@media (prefers-reduced-motion: reduce) 的优先级高于屏幕尺寸判断，且不可被用户关闭。
推荐组合写法：
/* 先处理无障碍 */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
}
}
/* 再处理小屏 */
@media (max-width: 480px) {
.hero-banner, .slide-in-card {
animation: none;
}
}
注意：prefers-reduced-motion 在 Safari 和 Chrome 都支持良好，但旧版 Android WebView 可能不识别，别把它当唯一防线。
最麻烦的其实是第三方组件里的内联动画——它们往往绕过你的 CSS，得靠 JS 检查并覆写 style.animation，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
