扫描

scan CSS 媒体特征用于根据输出设备的扫描过程应用 CSS 样式。

语法

scan 特征被指定为以下关键字值之一

interlace: 输出设备使用“隔行扫描”渲染，其中视频帧在仅指定屏幕上的“偶数行”和仅指定“奇数行”之间交替。
progressive: 输出设备渲染内容到屏幕，没有特殊处理。

描述

大多数现代屏幕（以及所有计算机屏幕）使用逐行扫描渲染，完全显示每个屏幕，没有任何特殊处理。

隔行扫描曾经被 CRT 显示器和一些等离子电视使用，以实现每秒帧数 (FPS) 更快的显示，同时降低带宽。使用隔行扫描，视频帧在渲染屏幕上的偶数行和奇数行之间交替，每帧只下载和渲染一半屏幕，利用人眼的图像平滑能力，因此大脑以一半带宽成本模拟更高的 FPS 广播。

当针对隔行扫描屏幕时，请避免屏幕上非常快速的移动，并确保动画细节宽度大于 1 像素，以减少闪烁。

示例

HTML

html

<p>This is a test.</p>

CSS

css

p {
  padding: 10px;
  border: solid;
}

@media screen and (scan: interlace) {
  p {
    background: #f4ae8a;
  }
}
@media screen and (scan: progressive) {
  p {
    text-decoration: underline;
  }
}
@media not screen and (scan: progressive) {
  p {
    border-style: dashed;
  }
}
@media not screen and (scan: interlaced) {
  p {
    color: purple;
  }
}

Result

规范

未找到规范

未找到 css.at-rules.media.scan 的规范数据。
检查此页面是否有问题或贡献一个缺失的 spec_url 到 mdn/browser-compat-data。同时确保规范包含在 w3c/browser-specs.

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅

用于指定扫描表达式的 @media at-规则。
使用媒体查询来理解何时以及如何使用媒体查询。