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

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

Auf Bildschirmen beziehen sich die Einheiten auf CSS-Zoll, Zentimeter oder Pixel, nicht auf physikalische 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 Abstand zwischen der Einheit und der Zahl.

Einheiten

dpi: Stellt die Anzahl der Punkte pro Zoll dar. Bildschirme enthalten typischerweise 72 oder 96 Punkte pro Zoll, aber die dpi für gedruckte Dokumente ist normalerweise wesentlich höher. Da 1 Zoll 2,54 cm entspricht, gilt 1dpi ≈ 0,39dpcm.
dpcm: Stellt die Anzahl der Punkte pro Zentimeter dar. Da 1 Zoll 2,54 cm entspricht, gilt 1dpcm ≈ 2,54dpi.
dppx: Stellt die Anzahl der Punkte pro px-Einheit dar. Aufgrund des festen 1:96-Verhältnisses von CSS-in zu CSS-px entspricht 1dppx 96dpi, was der Standardauflösung der in CSS angezeigten Bilder entspricht, wie sie durch image-resolution definiert ist.
x: Alias für dppx.

Hinweis: Obwohl die Zahl 0 unabhängig von der Einheit immer gleich ist, darf die Einheit hier nicht weggelassen werden. Anders ausgedrückt: 0 ist ungültig und stellt nicht 0dpi, 0dpcm oder 0dppx dar.

Beispiele

Verwendung in einer Media-Query

css

@media print and (min-resolution: 300dpi) {
  /* … */
}

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

@media (min-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

Browser-Kompatibilität

BCD tables only load in the browser