<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. seine 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 Leerraum 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 in der Regel viel höher. Da 1 Zoll 2,54 cm sind, ist 1dpi ≈ 0,39dpcm.
dpcm: Stellt die Anzahl der Punkte pro Zentimeter dar. Da 1 Zoll 2,54 cm sind, ist 1dpcm ≈ 2,54dpi.
dppx: Stellt die Anzahl der Punkte pro px-Einheit dar. Aufgrund des festen Verhältnisses von 1:96 von CSS in zu CSS px ist 1dppx äquivalent zu 96dpi, was der Standardauflösung von in CSS angezeigten Bildern entspricht, wie durch 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

Browser-Kompatibilität

Siehe auch

resolution Medieneigenschaft
Die image-resolution-Eigenschaft
Verwendung von @media-Queries

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden