网格

**grid** CSS 媒体特性可以用来测试输出设备是否使用基于网格的屏幕。

大多数现代计算机和智能手机都具有基于位图的屏幕。基于网格的设备示例包括纯文本终端和仅具有一种固定字体的基本手机。

语法

grid 特性被指定为 <mq-boolean> 值 (0 或 1)，表示输出设备是否基于网格。

示例

HTML

html

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>

CSS

css

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}

结果

规范

规范
媒体查询级别 4 # 网格

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

使用媒体查询
@media