<resolution>

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.

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 Leerraum 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 in der Regel viel höher. Da 1 Zoll 2,54 cm entspricht, gilt 1dpi ≈ 0.39dpcm.

dpcm

Repräsentiert die Anzahl der Punkte pro Zentimeter. Da 1 Zoll 2,54 cm entspricht, gilt 1dpcm ≈ 2.54dpi.

dppx

Repräsentiert die Anzahl der Punkte pro px-Einheit. Aufgrund des festen Verhältnisses von 1:96 zwischen CSS in und CSS px, ist 1dppx gleichbedeutend mit 96dpi, was der Standardauflösung von in CSS angezeigten Bildern entspricht, wie in image-resolution definiert.

x

Alias für dppx.

Beispiele

Verwendung in einer Media Query

@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

Browser-Kompatibilität

Siehe auch

• resolution Medienfunktion
• Die image-resolution Eigenschaft
• Verwendung von @media Queries