模拟 CSS 媒体功能

Sofia Emelianova
Sofia Emelianova
GitHub

如需模拟各种 CSS 媒体功能，请参阅渲染标签页上的模拟选项参考。

模拟 CSS 媒体功能 prefers-color-scheme

prefers-color-scheme CSS 媒体功能用于指明用户更喜欢浅色还是深色配色方案。

如需模拟此情况，请执行以下操作：

  1. 在 prefers-color-scheme 页面上，打开渲染标签页。

  2. 在模拟 CSS 媒体功能 prefers-color-scheme 下，从下拉列表中选择以下选项之一：

    • 无模拟
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. 重新加载页面。例如：

模拟 chooses-color-scheme:dark

模拟 CSS 媒体类型（启用打印预览）

打印媒体查询用于控制网页的打印效果。

如需强制将页面切换到打印预览模式，请执行以下操作：

  1. 打开渲染标签页，然后在模拟 CSS 媒体类型下选择打印。

    打印预览模式

  2. 在这里，您可以像查看和更改任何其他网页一样查看和更改 CSS。请参阅开始查看和更改 CSS。

模拟 CSS 媒体功能 forced-colors

forced-colors CSS 媒体功能用于指明用户代理是否启用了强制配色模式。强制色彩模式的一个例子是“Windows 高对比度”。

如需模拟此情况，请执行以下操作：

  1. 打开渲染标签页。

  2. 在模拟 CSS 媒体功能 forced-colors 下，从下拉列表中选择以下选项之一：

    • 无模拟
    • forced-colors:active
    • forced-colors:none

使用模拟 forced-colors:active 时：

forced-colors:active

模拟 CSS 媒体功能 prefers-contrast

prefers-contrast CSS 媒体功能用于指示用户是否请求以更高、更低或特定的对比度值呈现 Web 内容。

如需模拟此情况，请执行以下操作：

  1. 打开渲染标签页。

  2. 在模拟 CSS 媒体功能 prefers-contrast 下，从下拉列表中选择以下选项之一：

    • 无模拟
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

模拟 CSS 媒体功能 prefers-reduced-motion

prefers-reduced-motion CSS 媒体功能用于指示用户是否已请求尽量减少网页上的动作量。

如需模拟此条件，请执行以下操作：

  1. 打开此演示版的“Rendering”标签页，然后尝试滚动屏幕以查看各种动画。
  2. 在模拟 CSS 媒体功能 prefers-reduced-motion 下，选择 prefers-reduced-motion:reduce。
  3. 请尝试再次滚动。

模拟 CSS 媒体功能 prefers-reduced-transparency

prefers-reduced-transparency CSS 媒体功能用于指示用户是否请求减少设备上使用的透明或半透明层效果。

prefers-reduced-transparency 功能从 Chrome 118 开始提供，可让您根据用户选择的偏好设置调整网页内容，以减少操作系统的透明度，例如 macOS 上的降低透明度设置。

如需模拟此情况，请执行以下操作：

  1. 打开渲染标签页。
  2. 在模拟 CSS 媒体功能 prefers-reduced-transparency 下，选择 prefers-reduced-transparency: reduce。
  3. 检查您的网页是否正确显示。

模拟 CSS 媒体功能 color-gamut

color-gamut CSS 媒体功能用于指明用户代理和输出设备支持哪个颜色范围。

如需模拟此情况，请执行以下操作：

  1. 打开渲染标签页。

  2. 在模拟 CSS 媒体功能 color-gamut 下，从下拉列表中选择以下选项之一：

    • 无模拟
    • color-gamut:srgb - 约为 sRGB 色域
    • color-gamut:p3 - Display P3 Color Space 或更大值中指定的大致色域
    • color-gamut:rec2020 - 大致在 Rec. 2020 或更高级别中指定的色域