<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<resolution>
dpcm unit
dpi unit
dppx unit
x unit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch