Hauptmenü

Untermenü

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