开发者工具提示:如何使用开发者工具模拟 CSS 用户偏好设置媒体功能

Sofia Emelianova
Sofia Emelianova

借助用户偏好设置媒体功能,您可以根据用户自己的具体偏好和需求设置网络体验的样式。换言之,借助偏好媒体功能,您可以根据用户的预期调整用户体验。

您可以通过以下三个步骤改善网站的用户体验:

  1. 探索无限可能。了解所有用户偏好设置媒体功能
  2. 打造您的个性化网络体验。例如,根据偏好设置更改颜色、布局和元素大小。
  3. 测试界面。在 DevTools 中,模拟偏好设置并测试网站的行为方式。

DevTools 支持多种模拟选项。为了帮助您避免搜索和调整系统与浏览器设置,所有模拟选项都集中在开发者工具中的 Rendering 标签页下。

“渲染”标签页。

用户偏好设置的模拟选项包括但不限于:

  • prefers-color scheme - 浅色或深色配色方案
  • prefers-contrast - 对比度较低或较高
  • prefers-reduced-motion - 是否尽可能减少动作
  • prefers-reduced-data - 消耗的流量或不少

如需查看所有模拟选项的完整列表,请参阅模拟 CSS 媒体功能

如需了解您可以使用渲染标签页应用的更多效果,请参阅“渲染”标签页概览

此外,使用开发者工具时,您的测试功能不再局限于您在单台设备上使用。您可以使用 Device Mode 模拟移动设备