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

Bei 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 dem Einheit-Literal und der Zahl.

Einheiten

dpi: Bezeichnet die Anzahl der dots per inch. Bildschirme enthalten typischerweise 72 oder 96 dots per inch, aber die dpi für Druckdokumente ist normalerweise wesentlich größer. Da 1 Zoll 2,54 cm entspricht, ist 1dpi ≈ 0,39dpcm.
dpcm: Bezeichnet die Anzahl der dots per centimeter. Da 1 Zoll 2,54 cm entspricht, ist 1dpcm ≈ 2,54dpi.
dppx: Bezeichnet die Anzahl der Dots pro px Einheit. Aufgrund des festen Verhältnisses von 1:96 zwischen CSS in und CSS px entspricht 1dppx 96dpi, was der Standardauflösung von Bildern entspricht, die in CSS wie durch image-resolution definiert, dargestellt werden.
x: Alias für dppx.

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

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