CSS 媒体功能 - grid

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

媒体功能 grid 可用于将不同的样式应用于基于网格的设备，例如电视和某些移动电话。

可能的值

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

语法


grid: <mq-boolean>

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

CSS grid - 零值

以下示例演示了 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 - 一个值

以下示例演示了 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>

打印本页