应优先使用@media (prefers-reduced-motion: reduce)检测用户动画偏好，它是WCAG认证、全浏览器支持的语义化标准；辅以JS性能探测（如deviceMemory、requestIdleCallback）和UA识别做精准分层，CSS仅负责承接降级结果。
如何用 prefers-reduced-motion 检测用户是否开启“减少动画”偏好
这不是设备性能检测，但它是 CSS 动画控制最可靠、语义最明确的入口——操作系统或浏览器级设置，比任何 JS 性能探测都更贴近用户真实意图。很多所谓“高性能设备”上，用户主动关闭动画；而部分低端 Android 机反而默认开着动画但卡顿严重。prefers-reduced-motion 是唯一被 WCAG 和主流浏览器（Chrome/Firefox/Safari/Edge）稳定支持的媒体查询特性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (prefers-reduced-motion: reduce)全局关闭非必要动画，比如transition、animation、transform过渡效果 - 不要仅靠它“降级”，而要配合
will-change: auto或移除transform: translateZ(0)等强制 GPU 加速写法，避免低配设备因强制合成反而更卡 - 注意 Safari 对
prefers-reduced-motion的支持从 iOS 13 / macOS 10.15 开始，旧版本会忽略该查询，属于安全降级（不报错、不生效）
能否用 screen resolution 或 device-pixel-ratio 间接判断设备性能
不能直接等价，但可作为辅助信号：高 DPR（如 2 或 3）通常伴随较新 SoC 和 GPU，低分辨率（如 max-width: 480px）大概率是旧款小屏安卓机；不过有大量反例（如 Pixel 4a 有 DPR=2 但性能一般，iPad mini 6 分辨率高但 GPU 限频明显）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若必须做粗粒度分层，可用组合查询：
@media (max-width: 480px), (max-resolution: 1.5dppx)作为“可能低配”候选，再叠加 JS 验证 - 避免单独依赖
resolution媒体特性——CSS 中resolution不是标准属性，应使用min-resolution/max-resolution，且单位必须带dppx（不是dpi） - 在 iOS 上，
device-pixel-ratio媒体特性不可用，只能用-webkit-device-pixel-ratio（已废弃），所以实际应统一用resolution查询
为什么不能只靠 CSS 媒体查询判断设备性能
因为 CSS 本身没有访问 CPU/GPU/内存的能力，所有“性能相关”媒体特性（如 update、overflow-block）都与渲染管线负载无关，而是描述布局行为或内容溢出策略。W3C 明确拒绝将 prefers-performance 类特性纳入标准——它无法定义“性能”的边界，且易被滥用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 真要区分高低配，必须结合 JS：用
performance.now()测首帧耗时、用requestIdleCallback判断主线程空闲程度、或用self.deviceMemory（需 HTTPS，返回值为0.5/1/2/4/8GB） - 服务端也可参与：通过 UA 字符串识别已知低配机型（如 “SM-A105F”、“Redmi 7A”），但 UA 可伪造，仅作参考
- CSS 层面只负责承接 JS 决策结果：JS 添加
class="high-perf"或data-performance="low"到<html>，再用属性选择器写动画规则
如何让动画在低配设备上“软降级”而非直接禁用
直接删掉 animation 会让交互失去反馈感。更好的做法是换用开销更低的实现：把关键帧动画换成 transition，把 transform: scale() 改成 transform: scale3d()（某些 Android GPU 更快），或用 opacity 替代位移动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对同一元素，用不同 class 控制不同动画策略：
.card--animate-slide（含 transform + opacity 关键帧） vs.card--animate-fade（仅 opacity transition） - 避免在低配路径中使用
filter: blur()、box-shadow多层叠加、或background: radial-gradient()配合动画——这些在 Mali-G52 或 Adreno 308 上极易掉帧 - 使用
will-change: opacity比will-change: transform更轻量，但仅在真正需要时设置，用完及时设回auto
最常被忽略的一点：动画降级逻辑必须在首屏 JS 执行前就生效。这意味着不能等 DOMContentLoaded，而要在内联脚本中用 document.documentElement.classList 同步打标，否则用户会看到高配动画闪一下再切到低配版本。
