resolution

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die resolution- CSS Medienabfrage kann verwendet werden, um die Pixeldichte des Ausgabegeräts zu testen.

Syntax

Das resolution-Merkmal wird als ein <resolution>-Wert angegeben, der die Pixeldichte des Ausgabegeräts darstellt. Es handelt sich um ein Bereichs-Merkmal, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-resolution und max-resolution verwenden können, um jeweils Mindest- und Höchstwerte abzufragen.

Beispiele

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;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# resolution

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch