CSS3 - Media Queries - Die Möglichkeiten
1. Größenangaben
height
/width
Bezieht sich auf die Größe des so genannten Viewports, also zum Beispiel auf die tatsächliche Größe eines Browserfensters. Zusätzlich erlaubt sind die Präfixe
min-
und max-
. Bei den Größenangaben gibt es px
, em
sowie all die anderen Dinge, die wir noch nie benutzt haben
(mm
, cm
und so weiter).
<link media="screen and (min-width: 960px)" ... />
device-height
/device-width
Hier geht es um die Auflösung des Endgeräts. min-
und max-
sind auch hier möglich. Als Maßeinheit gibt es, so weit ich das derzeit beurteile,
nur px
.
<link media="screen and (min-device-width: 960px)" ... />
2. Format
orientation
Einfach ausgedrückt bezieht sich das auf Hoch- oder Querformat. Ist width
größer als height
so gilt landscape
(Querformat),
anderenfalls portrait
(Hochformat). Diese Angaben beziehen sich nicht auf das Endgerät, sondern auf das Ausgabeprogramm, gemeinhin den Browser.
<link media="screen and (orientation: landscape)" ... />
aspect-ratio
/device-aspect-ratio
Prüft auf die Seitenverhältnisse Breite und Höhe. aspect-ratio
gilt für die Werte von width
und height
,
device-aspect-ratio
für die von device-height
und device-width
. Erlaubt sind hier nur Ganzzahlen.
<link media="screen and (aspect-ratio: 16/9)" ... />
<link media="screen and (aspect-ratio: 4/3)" ... />
3. Farben
color
Bezieht sich auf die Farbtiefe eines Endgeräts, also zum Beispiel 8bit, 16bit, 24bit oder 32bit. Soweit ganz einfach, aber bei der Berechnung wird es kompliziert.
Denn es geht um die Anzahl von Bits pro Farbkomponente. Bei RGB also entsprechen 16bit einem color
-Wert von 5
und 32bit einem 8
.
Fragt mich nicht, was das soll. Das letzte Mal, wo ich mich damit rumschlagen musste, war es Ende der 90er, wo noch viele Bildschirme auf 256 Farben liefen.
Ach ja, color
lässt auch min-
und max-
zu.
/* sollte in den meisten Fällen reichen */
<link media="screen and (min-color: 5)" ... />
color-index
Warum so kompliziert, wenn es auch einfach geht. Denn damit gibt man einfach die Anzahl der zur Verfügung stehenden Farben an. Leider
gibt es da wieder ein Problem. Denn die dafür benötigte Farbtabelle wird nur dann vom Browser übermittelt, wenn das Endgerät über eine eingeschränkte Farbfähigkeit
verfügt. Ansonsten wird eine 0
ausgegeben. Da ich meinen Monitor nur auf 16bit runterschrauben kann, fehlen mir die Möglichkeiten für entsprechende
Tests. Darum empfehle ich euch folgende Anweisung, die funktioniert in allen modernen Browsern. Die Präfixes min-
und max-
werden wohl
unterstützt, scheinen aber recht nutzlos zu sein.
/* sollte in den meisten Fällen reichen */
<link media="screen and (color: 0)" ... />
4. Pixeldichte
resolution
... kümmert sich um die berüchtigte dpi
-Angabe. Meiner ersten Einschätzung nach spielt das höchstens bei hoch auflösenden Retina-Displays von
Smartphones eine Rolle, aber so genau weiß ich das im Moment selber nicht.
<link media="screen and (resolution: 96dpi)" ... />
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt