CSS媒体特性 - 网格

CSS grid 媒体特性用于检查用户设备或屏幕是否支持网格布局。

grid 媒体特性可用于为基于网格的设备（例如电视和某些手机）应用不同的样式。

可能的值

<mq-boolean> − 它显示设备是否使用网格布局。这表示值为 0 表示输出设备不是基于网格的，而值为 1 表示输出设备基于网格系统。

语法

grid: <mq-boolean>

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格 - 零值

以下示例演示了grid: 0媒体特性。对于非基于网格的设备，元素的背景颜色更改为绿色，文本颜色更改为白色−

Open Compiler

<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媒体特性。对于基于网格的设备，元素的背景颜色变为紫色−

Open Compiler

<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>

打印页面