CSS 媒體特性 - 解析度

CSS 解析度媒體特性檢查螢幕上每英寸顯示多少畫素。

此特性允許您指定一系列螢幕解析度。您可以使用min-resolution匹配解析度大於或等於某個值的裝置，並使用max-resolution匹配解析度小於或等於某個值的裝置。

解析度採用一個數字，後跟dpi（每英寸點數）、dpcm（每釐米點數）或dppx（每畫素點數）。在 CSS 中，畫素始終為 96dpi，因此 1dppx 是常規螢幕解析度，而 2dppx 是“視網膜”解析度。

可能的值

<integer> − 一個正整數，表示輸出裝置的 dpi 數。

語法

resolution: <integer>

CSS 解析度 - <interge> 值

以下示例演示瞭如何使用 CSS 解析度媒體特性在輸出裝置的解析度為 96dpi 時將 div 元素的背景顏色更改為紅色 −

<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 元素的背景顏色更改為紅色 −

<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 元素的背景顏色更改為粉紅色 −

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

列印頁面