resolution

Baseline 已廣泛支援

此功能已成熟,並可在多種裝置和瀏覽器版本上執行。自 2022 年 9 月起,所有瀏覽器都已支援此功能。

resolution CSS 媒體特性可用於測試輸出裝置的畫素密度。

語法

resolution 特性被指定為表示輸出裝置畫素密度的 <resolution> 值。它是一個範圍特性,這意味著你也可以使用帶有字首的 min-resolutionmax-resolution 變體來分別查詢最小值和最大值。

示例

HTML

html
<p>This is a test of your device's pixel density.</p>

CSS

css
/* Exact resolution with unit `dpi` */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* Minimum resolution synonym units: `dppx` and `x` */
@media (min-resolution: 2dppx) {
  p {
    text-decoration: underline;
  }
}

@media (min-resolution: 2x) {
  p {
    text-decoration: underline;
  }
}

/* Maximum resolution with unit `dpcm` */
@media (max-resolution: 2dpcm) {
  p {
    background: yellow;
  }
}

結果

規範

規範
媒體查詢第 4 級
# resolution

瀏覽器相容性

另見