前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库CSS prefers-reduced-motion media query
CSS响应式设计

怎样用 prefers-reduced-motion 照顾不适合动画的用户?

prefers-reduced-motion: reduce 表示用户偏好减少非必要运动。可以在该条件下关闭持续位移、缩放、视差等容易造成不适的动画,或换成更温和的淡入;不要假定所有动画都必须彻底删除。页面仍需保留状态反馈和操作完成提示,也要检查 JavaScript 驱动的动画是否响应同一偏好。

前端进阶之旅 · 一题精讲更新于 2026.09.29
CSS#响应式设计#动画
先看核心答案读代码示例
理解线索

减少运动不等于删除反馈

  1. reduce表达用户希望少看非必要运动,不等于删除所有反馈
  2. 持续运动视差和持续位移更可能造成不适,应先处理
  3. 状态反馈展开、完成等状态仍需让人看懂,脚本动画也要响应

状态改变仍需可感知,可以用文字、颜色或较温和的过渡提示。

核心回答

先记住这个答案

prefers-reduced-motion: reduce 是减少非必要运动的请求,不是“删除一切状态反馈”的命令。对持续平移、缩放或视差效果,应提供静态或更平缓的路径;对加载完成、展开收起等交互,仍需保留可辨认的状态变化。CSS 动画和脚本动画若只处理一边,用户仍会看到另一边的运动。

  • reduce 是用户运动偏好
  • 优先减少持续位移与视差
  • 必要状态反馈仍要保留
  • 脚本动画也要响应偏好

视差和轮播怎样减少运动

营销页有背景视差和无限滚动的装饰图形。用户系统设置了减少动态效果后,页面应停止这些运动,但按钮点击后的加载状态仍要能被看见。给关键动画写默认方案,再在媒体查询中减少持续运动;同时检查轮播自动播放和脚本动画,CSS 查询不会自动替你停掉脚本计时器。实际体验还应在操作系统和浏览器模拟中测试。

停止视差并保留状态反馈CSS
@media (prefers-reduced-motion: reduce) {
  .parallax { transform: none; animation: none; }
  .carousel { scroll-behavior: auto; }
  .status {
    transition-duration: 0.01ms; /* 保留状态变化 */
  }
}

这一媒体特性查询用户对动态效果的偏好,reduce 不是“设备性能差”的信号。 示例用近乎零时长的过渡,是为了让状态仍能迅速变化,而不是让用户等待长时间滑动。轮播若每几秒自动前进,即使把 CSS 动画关掉,内容仍可能突然更换;应同时停止自动播放或提供暂停控制。检查时在系统里打开减少动态效果,再走完整个交互流程,而不是只看样式表中是否出现了媒体查询。

减少运动不等于删除反馈

它也不指定哪种动画一定安全,具体应看运动的幅度、持续时间和是否受用户控制。大面积移动、闪烁、自动播放常更值得优先处理;必要的过渡可改短或改成非运动提示。CSS 动画可由样式覆盖,Web Animations API、视频和第三方动效还要在各自逻辑里响应偏好。

一个抽屉打开时,完全删除动画仍需让“已打开”状态可感知:焦点应进入抽屉,遮罩和按钮状态也要变化。对视差滚动,直接固定背景或移除位移更可靠;对很短的颜色过渡,则可按实际刺激程度决定是否保留。若动画由 JavaScript 库驱动,CSS 媒体规则无法自动停掉库内的定时器或时间线。

回答前,多想一步

容易答错的地方

把减少动态效果当成禁用所有反馈
状态改变仍需可感知,可以用文字、颜色或较温和的过渡提示。
只处理 CSS animation
脚本、视频和自动滚动也可能制造运动,应一起审查。
试着用自己的话回答

面试官还会怎么问?

怎样在 JavaScript 中读取偏好?

用 matchMedia 查询该媒体特性,并监听变化;脚本驱动的动画据此停止或改为简化版。

reduce 是否意味着所有过渡都必须设为零?

不是。目标是减少可能造成不适的运动,同时保留必要的状态反馈。

浏览器模拟通过就算完成了吗?

还要用键盘和真实设备检查自动播放、滚动及第三方动效。

从一道题,走向一组知识

把知识连起来

响应式设计

媒体查询里的 and、逗号和 not 怎么组合?

减弱动画的规则可与宽度条件用 and 组合,避免把所有设备一概而论。

响应式设计

媒体类型和媒体特性有什么区别,能一起写吗?

它和查询 hover 等媒体特性一样,都描述环境能力或用户偏好,而不是设备名称。

参考资料

  • prefers-reduced-motion CSS media feature

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 视差和轮播怎样减少运动
  3. 减少运动不等于删除反馈
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑