<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, also 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 Abstand zwischen dem Einheitensymbol und der Zahl.

Einheiten

dpi: Repräsentiert die Anzahl der Punkte pro Zoll. Bildschirme enthalten typischerweise 72 oder 96 Punkte pro Zoll, aber der dpi-Wert für gedruckte Dokumente ist normalerweise viel höher. Da 1 Zoll 2,54 cm entspricht, ist 1dpi ≈ 0.39dpcm.
dpcm: Repräsentiert die Anzahl der Punkte pro Zentimeter. Da 1 Zoll 2,54 cm entspricht, ist 1dpcm ≈ 2.54dpi.
dppx: Repräsentiert die Anzahl der Punkte pro px Einheit. Aufgrund des festen 1:96-Verhältnisses von CSS in zu CSS px entspricht 1dppx 96dpi, was der standardmäßigen Bildauflösung entspricht, die in CSS definiert ist, wie durch image-resolution beschrieben.
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 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

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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