开发者工具提示:如何使用开发者工具模拟 CSS 用户偏好设置媒体功能
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
借助用户偏好媒体功能,您可以根据用户自己的具体偏好和需求设置 Web 体验的样式。换句话说,借助偏好媒体功能,您可以根据用户的预期调整用户体验。
您可以通过以下三个步骤提升网站的用户体验:
- 探索各种可能性。了解所有用户偏好媒体功能。
- 设置 Web 体验的样式。例如,根据偏好设置实现颜色、布局和元素大小的更改。
- 测试界面。在 DevTools 中,模拟偏好设置并测试网站的行为方式。
开发者工具支持多种模拟选项。为帮助您避免搜索和调整系统和浏览器设置,所有模拟选项都位于一个位置:DevTools 中的渲染标签页下。

用户偏好的模拟选项包括但不限于:
prefers-color scheme
- 浅色或深色配色方案
prefers-contrast
- 降低或提高对比度
prefers-reduced-motion
- 是否尽可能减少动画
prefers-reduced-data
- 是否会消耗更少的流量
如需查看所有模拟选项的完整列表,请参阅模拟 CSS 媒体功能。
如需了解您可以使用渲染标签页应用的更多效果,请参阅“渲染”标签页概览。
此外,借助 DevTools,您的测试功能不仅限于您当前使用的单个设备。您可以使用 Device Mode 模拟移动设备。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2022-07-14。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2022-07-14。"],[],[]]