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

瀏覽器相容性

另見