使用 prefers-reduced-motion 媒体查询可以检测用户是否开启了系统级的减少动态效果选项，从而自动关闭或简化 css 动画与过渡。具体做法是在样式表中定义该媒体查询规则，将涉及动画的属性（如 animation、transition）重置为静态状态，例如设置 animation: none 或 transition: none。这样既保留了视觉设计的完整性，又尊重了用户的无障碍偏好。
prefers-reduced-motion 如何匹配用户设置？
该媒体查询通过匹配操作系统的辅助功能设置来生效。当用户在 Windows、macOS 或移动端系统中开启“减少动画”选项后，浏览器会将 prefers-reduced-motion: reduce 设为真值。开发者只需在 CSS 中针对此条件编写覆盖规则，即可实现无感知的体验优化，无需 JavaScript 介入。
@media (prefers-reduced-motion: no-preference) {
.hero {
animation: slideIn 1s ease-out;
}
}
@media (prefers-reduced-motion: reduce) {
.hero {
animation: none;
opacity: 1;
}
}上述代码展示了标准写法。第一段规则仅在用户未指定偏好时应用动画；第二段规则在检测到 reduce 偏好时强制移除动画并立即显示元素。这种分层策略确保了默认行为与现代设备的兼容性，同时兼顾了特殊需求。
立即学习“前端免费学习笔记（深入）”；
如何处理复杂的过渡效果？
对于涉及多个属性的复杂过渡，直接禁用可能导致布局突变。更稳妥的做法是保留关键帧但缩短持续时间，或者仅禁用非必要的装饰性动画。通过检查实际渲染结果，可以发现完全禁用 transition 会使页面交互显得生硬，因此建议结合 will-change 或静态样式进行微调。
.card {
transition: transform 0.3s, opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card:hover {
transform: none;
}
}这段代码针对卡片悬停效果进行了处理。在减少运动模式下，不仅移除了过渡动画，还禁用了悬停时的变换效果，防止因鼠标移动引发的视觉干扰。这种处理方式适用于对平衡感要求较高的界面组件。
如果用户没有设置偏好会怎样？
当用户未明确设置偏好时，浏览器默认返回 no-preference。此时，常规动画规则正常生效，确保所有用户都能获得完整的视觉体验。开发者应始终提供默认样式，避免假设所有用户都启用了无障碍功能。通过测试不同操作系统下的默认行为，可以验证样式的鲁棒性。
