应优先使用 prefers-reduced-motion 媒体查询判断用户动画偏好，而非仅依赖设备类型；它源自系统设置，体现用户真实可访问性需求，CSS 中需前置重置动画时长与次数，JS 中也应监听并跳过非必要动画。
怎么用 window.matchMedia 判断设备类型并切换动画行为
靠 UA 字符串识别设备既不可靠又容易过时，window.matchMedia 是现代、轻量、可维护的方案。它不判断“是不是手机”，而是判断“当前视口是否符合某类媒体查询条件”，更贴合响应式动画的真实需求。
常见错误是写成 window.matchMedia('(max-width: 768px)') 后直接监听，却没考虑横屏手机（可能宽 > 768px）或折叠屏等新场景。
- 推荐用
window.matchMedia('(hover: none) and (pointer: coarse)')判断触控主设备（绝大多数手机/平板），比单纯看宽度更准确 - PC 端通常匹配
'(hover: hover) and (pointer: fine)'，可触发 hover 动画、鼠标跟随等效果 - 监听需调用
mql.addEventListener('change', handler)（注意不是addListener，后者已废弃） - 首次判断别忘手动执行一次
handler(mql)，否则初始状态可能错位
CSS @media 里怎么控制 @keyframes 的启用与禁用
CSS 动画本身不能在媒体查询里定义 @keyframes，但可以控制它的应用——即通过媒体查询开关 animation 属性值。
典型误操作：在手机媒体查询里写 animation: none，结果发现动画仍闪一下才停。这是因为 none 不会清空已有动画状态，必须用 animation: initial 或显式设为空值。
立即学习“前端免费学习笔记（深入）”；
- PC 端启用复杂动画：
animation: slideIn 0.4s ease-out; - 移动端降级为平滑过渡：
animation: none; transition: transform 0.2s, opacity 0.2s; - 若需彻底禁用（比如省电模式）：
animation: none !important; animation-play-state: paused !important; - 注意：部分安卓 WebView 对
animation-play-state支持不稳定，建议优先用animation: none+transition替代
用 requestAnimationFrame 做 JS 动画时如何适配不同刷新率与交互方式
PC 显示器多为 60Hz，高端笔记本/显示器可达 120Hz+；而多数手机屏幕虽标称 60Hz，实际触控响应和滚动帧率波动大。硬编码 setTimeout(..., 16) 会导致手机端卡顿、PC 端浪费性能。
