grid

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

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

大多数现代计算机和智能手机都配备基于位图的屏幕。基于网格的设备示例包括纯文本终端和只使用固定字体样式的基础手机。

语法

grid 特性指定为一个 <mq-boolean> 值(01),表示输出设备是否基于网格。

示例

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 级
# grid

浏览器兼容性

另见