应优先使用 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 端浪费性能。
另一个常被忽略的点：触控设备上用户手势（如快速 swipe）会打断 requestAnimationFrame 流程，若没做 cancel，动画残留会造成视觉撕裂。
- 始终用
let rafId = requestAnimationFrame(loop)，并在交互开始前调用cancelAnimationFrame(rafId) - 对触控设备，监听
touchstart和scroll事件，暂停动画逻辑；松手后延时 100ms 再恢复（避免误触发） - 需要逐帧控制节奏时，用
performance.now()计算真实 delta 时间，别依赖帧数假设 - 避免在 rAF 回调里频繁读取
offsetTop或getBoundingClientRect()，尤其在移动端，这会强制同步布局计算
为什么 prefers-reduced-motion 比设备判断更重要
很多开发者花大力气区分 PC/手机，却忽略了一个更关键的信号：(prefers-reduced-motion: reduce)。它来自系统设置，代表用户明确表达了对动画的排斥——无论设备类型、无论屏幕大小。
这个媒体查询优先级高于设备类型判断。比如一个开着“减少运动”选项的 MacBook，你给它加了炫酷 hover 动画，就违背了可访问性原则，也违反 WCAG 2.1 标准。
- 务必在 CSS 中前置定义：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } - JS 中也可监听：
window.matchMedia('(prefers-reduced-motion: reduce)').matches === true，此时应跳过所有非必要动画逻辑 - 注意：iOS Safari 直到 iOS 13 才支持该查询，旧版本需 fallback 到 UA 或用户设置偏好存储
设备尺寸和输入方式只是表象，用户的实际偏好和系统能力才是动画是否该出现的决定性因素。漏掉 prefers-reduced-motion 处理，再精细的 PC/手机区分都可能变成无障碍缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
