<resolution>

Übersicht

Der <resolution> CSS Datentyp, der in Media Queries verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine <number>, der direkt eine Auflösungseinheit (dpi, dpcm, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.

Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.

Auch wenn alle Einheiten die gleiche Auflösung für den Wert 0 darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine <length> ist: 0 ist ungültig und repräsentiert weder 0dpi, 0dpcm, noch 0dppx.

Einheiten

dpi: Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, 1dpi ≈ 0.39dpcm.
dpcm: Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, 1dpcm ≈ 2.54dpi.
dppx: Diese Einheit repräsentiert die Anzahl an Punkten pro px Einheit. Wegen dem festen 1:96 Verhältnis von CSS in zu CSS px, ist 1dppx äquivalent zu 96dpi, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in image-resolution definiert.

Beispiele

Hier sind einige korrekte Verwendungen von <resolution> Werten:

96dpi                                              Korrekte Verwendung: ein <number> Wert (hier ein <integer>) gefolgt von einer Einheit.
@media print and (min-resolution: 300dpi) { ... }  Korrekte Verwendung im Kontext einer Media Query.

Hier sind einige inkorrekte Verwendungen:

72 dpi                                             Falsch: Keine Leerzeichen erlaubt zwischen <number> und der Einheit.
ten dpi                                            Falsch: Nur Ziffern dürfen verwendet werden.
0                                                  Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen <length> Wert darstellen.

Spezifization

Spezifikation	Status	Kommentar
CSS Values and Units Module Level 3 Die Definition von '<resolution>' in dieser Spezifikation.	Anwärter Empfehlung	Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.
CSS Image Values and Replaced Content Module Level 3 Die Definition von '<resolution>' in dieser Spezifikation.	Anwärter Empfehlung	`dppx` Einheit hinzugefügt
Media Queries Die Definition von '<resolution>' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Grundlegende Unterstützung	29	3.5 (1.9.1) [**]	9	9.5	Nicht unterstützt [*]
`dppx`	29	16.0 (16.0)	?	12.10	?

Merkmal	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	Nicht unterstützt [*]	yes	?	yes	Nicht unterstützt [*]
`dppx`	?	16.0 (16.0)	?	12.10	?

[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten device-pixel-ratio Abfrage wird für Safari Browser benötigt, siehe Bug 16832.

[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS <integer> Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt (<number> direkt gefolgt von der Einheit).

Siehe auch

CSS Media Queries