CSS 媒体功能 - resolution

CSS 媒体功能 resolution 检查屏幕上每英寸显示多少像素。

此功能允许您指定屏幕分辨率的范围。您可以使用 min-resolution 来匹配分辨率大于或等于特定值的设备，并使用 max-resolution 来匹配分辨率小于或等于特定值的设备。

分辨率采用 dpi（每英寸点数）、dpcm（每厘米点数）或 dppx（每像素点数）的数字。在 CSS 中，像素始终为 96dpi，因此 1dppx 是常规屏幕分辨率，而 2dppx 是“视网膜”。

可能的值

<integer> - 正整数值，表示输出设备的 dpi 数。

语法


resolution: <integer>

CSS resolution - <interge> 值

以下示例演示了当输出设备的分辨率为 96dpi 时，如何使用 CSS 分辨率媒体功能将 div 元素的背景颜色更改为红色 -


<html>
<head>
<style>
	 	@media (resolution: 96dpi) {
	 	 	 div {
	 	 	 	 	background-color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div>CSS媒体功能分辨率。</div>
</body>
</html>

CSS resolution - min-resolution 属性

以下示例演示了最小分辨率媒体功能，当输出设备的分辨率为 80dpi 或更高时，将 div 元素的背景颜色更改为红色 -


<html>
<head>
<style>
	 	@media (min-resolution: 80dpi) {
	 	 	 div {
	 	 	 	 	background-color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div>CSS媒体功能最低分辨率。</div>
</body>
</html>

CSS resolution - max-resolution 属性

以下示例演示了当输出设备的分辨率为 300dpi 或更低时，max-resolution 媒体功能会将 div 元素的背景颜色更改为粉红色 -


<html>
<head>
<style>
	 	@media (max-resolution: 300dpi) {
	 	 	 div {
	 	 	 	 	background-color: pink;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div>CSS媒体功能最大分辨率。</div>
</body>
</html>

打印本页