<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.

Der <resolution> CSS Datentyp, der zur Beschreibung von Auflösungen in Media-Queries verwendet wird, bezeichnet die Pixeldichte eines Ausgabegeräts, d.h. dessen Auflösung.

Auf Bildschirmen beziehen sich die Einheiten auf CSS-Zoll, Zentimeter oder Pixel, nicht auf physische Werte.

Syntax

Der <resolution> Datentyp besteht aus einer strikt positiven <number>, gefolgt von einer der unten aufgeführten Einheiten. Wie bei allen CSS-Dimensionen gibt es keinen Leerraum zwischen der Einheit und der Zahl.

Einheiten

dpi: Steht für die Anzahl der Punkte pro Zoll. Bildschirme enthalten typischerweise 72 oder 96 Punkte pro Zoll, aber die dpi für gedruckte Dokumente ist normalerweise viel höher. Da 1 Zoll 2,54 cm entspricht, gilt 1dpi ≈ 0.39dpcm.
dpcm: Steht für die Anzahl der Punkte pro Zentimeter. Da 1 Zoll 2,54 cm entspricht, gilt 1dpcm ≈ 2.54dpi.
dppx: Steht für die Anzahl der Punkte pro px Einheit. Aufgrund des festen Verhältnisses von 1:96 von CSS in zu CSS px entspricht 1dppx 96dpi, was der standardmäßigen Auflösung von Bildern entspricht, die in CSS angezeigt werden, wie in image-resolution definiert.
x: Alias für dppx.

Hinweis: Obwohl die Zahl 0 unabhängig von der Einheit immer gleich ist, darf die Einheit nicht weggelassen werden. Mit anderen Worten, 0 ist ungültig und repräsentiert nicht 0dpi, 0dpcm oder 0dppx.

Beispiele

Verwendung in einer Media-Query

css

@media print and (resolution >= 300dpi) {
  /* … */
}

@media (resolution: 120dpcm) {
  /* … */
}

@media (resolution >= 2dppx) {
  /* … */
}

@media (resolution: 1x) {
  /* … */
}

Gültige Auflösungen

96dpi
50.82dpcm
3dppx

Ungültige Auflösungen

72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.

Spezifikationen

Specification
CSS Values and Units Module Level 4 # resolution