CSS 数据类型 - resolution

CSS 数据类型 <resolution> 在媒体查询中使用时，表示输出设备的像素密度，例如其分辨率。

屏幕的单位不是使用物理测量，而是 CSS 英寸、厘米或像素。

单位

dpi - 表示一英寸中的点数。打印文档的每英寸点数（dpi）通常比屏幕高得多，屏幕通常有 72 或 96 dpi。1 英寸相当于 2.54 厘米，因此 1 dpi 大致相当于每厘米 0.39 点（dpcm）。
dpcm - 表示每厘米的点数。由于 1 英寸相当于 2.54 厘米，因此每厘米 1 点（dpcm）大致相当于 2.54 每英寸（dpi）。
dppx - 表示每单位像素的点数。由于 CSS in 和 CSS px 之间的固定比例为 1：96，因此每像素 1 点（dppx）等于 96 像素（dpi），这对应于 image-resolution 指定的 CSS 中显示的图像的默认分辨率。
x - dppx 的别名。

语法

列出的单位之一后跟一个正值 <number> ，在 <resolution> 数据类型中。单位符号和数字之间不应有空格，就像在所有其他 CSS 维度中一样。

CSS <resolution> - 基本示例

以下示例演示了 CSS 数据类型<resolution> 的用法


<html>
<head>
<style>
	 	div {
	 	 	 margin: 10px;
	 	 	 background-color: aqua;
	 	}
	 	@media (min-resolution: 80dpi) {
	 	 	 .box1 {
	 	 	 	 	background-color: red;
	 	 	 }
	 	}
	 	@media (max-resolution: 300dpi) {
	 	 	 .box2 {
	 	 	 	 	background-color: yellow;
	 	 	 }
	 	}
	 	@media (resolution: 96dpi) {
	 	 	 .box3 {
	 	 	 	 	background-color: pink;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<div class="box1">This box will have a red background when the screen resolution is at least 80dpi.</div>
	 	<div class="box2">This box will have a yellow background for devices with a maximum resolution of 300dpi.</div>
	 	<div class="box3">This box will have a pink background when the screen resolution is exactly 96dpi.</div>
</body>
</html>

打印本页