概述`prefers-reduced-motion` 媒体查询反映用户的动效偏好。可用于禁用或降低动画强度与频率,避免在敏感人群中引发不适。用法/示例@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important } } const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches if (reduce) disableHeavyEffects() 工程建议优先禁用大幅位移与缩放类动画;保留必要的轻量过渡以维持语义与反馈。在组件级提供开关与细粒度控制;与 `View Transitions`/WAAPI 协作降级。验证用户体验并记录反馈,避免“一刀切”影响可用性。参考与验证MDN:`prefers-reduced-motion` — https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motionweb.dev:Motion reduction — https://web.dev/articles/prefers-reduced-motion

发表评论 取消回复