resolution

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

Siehe auch