模拟 CSS 媒体功能

Sofia Emelianova
Sofia Emelianova
GitHub

参考 Rendering 标签页中的模拟选项，模拟各种 CSS 媒体功能。

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

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

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

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

  2. 在 Emulate CSS media feature prefers-color-scheme 下，从下拉列表中选择以下选项之一：

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

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

模拟 refers-color-scheme:dark

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

打印媒体查询用于控制网页打印时的外观。

要强制网页进入打印预览模式，请执行以下操作：

  1. 打开 Rendering 标签页，然后在 Emulate CSS media type 下选择 print。

    打印预览模式

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

模拟 CSS 媒体功能 forced-colors

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

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

  1. 打开呈现标签页。

  2. 在 Emulate CSS media feature forced-colors 下，从下拉列表中选择以下选项之一：

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

模拟 forced-colors:active 时：

强制颜色:有效

模拟 CSS 媒体功能 prefers-contrast

prefers-contrast CSS 媒体功能可以指明用户是请求以更高、更低还是特定的对比度值来呈现网页内容。

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

  1. 打开呈现标签页。

  2. 在 Emulate CSS media feature prefers-contrast 下，从下拉列表中选择以下选项之一：

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

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

prefers-reduced-motion CSS 媒体功能可指示用户是否请求将网页上的动作量降至最低。

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

  1. 打开此演示中的呈现标签页，然后尝试滚动以查看各种动画。
  2. 在 Emulate CSS media feature prefers-reduced-motion 下，选择 prefers-reduced-motion:reduce。
  3. 请尝试再次滚动。

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

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

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

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

  1. 打开呈现标签页。
  2. 在 Emulate CSS media feature prefers-reduced-transparency 下，选择 prefers-reduced-transparency: reduce。
  3. 检查您的页面能否正常显示。

模拟 CSS 媒体功能 color-gamut

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

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

  1. 打开呈现标签页。

  2. 在 Emulate CSS media feature color-gamut 下，从下拉列表中选择以下选项之一：

    • 无模拟
    • color-gamut:srgb - 约为 sRGB 色域或更高
    • color-gamut:p3 - 近似值在 Display P3 色彩空间或更大范围内指定的色域
    • color-gamut:rec2020 - 近似于 Rec. 2020 或更多建议中指定的色域