CSS媒體特性 - 網格

CSS grid 媒體特性用於檢查使用者裝置或螢幕是否支援網格佈局。

grid 媒體特性可用於為基於網格的裝置（例如電視和某些手機）應用不同的樣式。

可能的值

<mq-boolean> − 它顯示裝置是否使用網格佈局。這表示值為 0 表示輸出裝置不是基於網格的，而值為 1 表示輸出裝置基於網格系統。

語法

grid: <mq-boolean>

大多數現代計算機和智慧手機都具有基於點陣圖的螢幕。基於網格的裝置示例包括純文字終端和僅具有單一固定字型的基本手機。

CSS 網格 - 零值

以下示例演示了grid: 0媒體特性。對於非基於網格的裝置，元素的背景顏色更改為綠色，文字顏色更改為白色−

<html>
<head>
<style>
   .box {
      width: 150px;
      height: 100px;
      background-color: violet;
   }
   @media (grid: 0) {
      .box {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <div class="box">Media Fetaure grid: 0</div>
</body>
</html>

CSS 網格 - 一值

以下示例演示了grid: 1媒體特性。對於基於網格的裝置，元素的背景顏色變為紫色−

<html>
<head>
<style>
   .box {
      width: 150px;
      height: 100px;
      background-color: violet;
   }
   @media (grid: 1) {
      .box {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <div class="box">Media Fetaure grid: 1</div>
</body>
</html>

列印頁面