CSS 媒体特性 - 分辨率

CSS 分辨率媒体特性检查屏幕上每英寸显示多少像素。

此特性允许您指定一系列屏幕分辨率。您可以使用min-resolution匹配分辨率大于或等于某个值的设备，并使用max-resolution匹配分辨率小于或等于某个值的设备。

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

可能的值

<integer> − 一个正整数，表示输出设备的 dpi 数。

语法

resolution: <integer>

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

CSS 分辨率 - <interge> 值

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

Open Compiler

<html>
<head>
<style>
   @media (resolution: 96dpi) {
      div {
         background-color: red;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature resolution.</div>
</body>
</html>

CSS 分辨率 - min-resolution 属性

以下示例演示了min-resolution媒体特性，在输出设备的分辨率为 80dpi 或更高时，将 div 元素的背景颜色更改为红色 −

Open Compiler

<html>
<head>
<style>
   @media (min-resolution: 80dpi) {
      div {
         background-color: red;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature min-resolution.</div>
</body>
</html>

CSS 分辨率 - max-resolution 属性

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

Open Compiler

<html>
<head>
<style>
   @media (max-resolution: 300dpi) {
      div {
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature max-resolution.</div>
</body>
</html>

打印页面