Parameter für Media-Queries bei responsive Designs

Bei der Erstellung von CSS-Stilen wird die Abhängigkeit von Medientypen, Auflösungen oder Fensterbreiten durch Parameter der Media-Queries realisiert. Möchte man z.B. dass gewisse CSS-Stile nur bei Bildschirmen zur Anwendung kommen, kann man folgenden Code verwenden.

@media screen {
/* CSS-Stile für Bildschirme */
}

Ausdruck mit "not" negieren

Man kann einen Ausdruck mit dem Schlüsselwort not negieren. Ein Beispielcode, um CSS-Stile für alle Medientypen festzulegen, außer für Bildschirme (nicht Bildschirm).

@media not screen {
/* CSS-Stile für alles, außer Bildschirme */
}

Mehrere Ausdrücke mit "and" verknüpfen

Man kann die Abhängigkeit mit einem logischen and erweitern. Mit dem folgenden Beispielcode wird festgelegt, dass die CSS-Stile für Bildschirme und bei einer Mindestbreite von 768 Pixeln gelten sollen. Beide Bedingungen müssen zutreffen.

@media screen and (min-width: 768px) {
/* CSS-Stile für Bildschirme und ab 768px */
}

Mit Komma "," mehrere Ausdrücke mit logischem Oder verknüpfen

Wenn man mehrere Ausdrücke mit einem logischen Oder (or) verknüpfen möchte, verwendet man ein Komma. Mit dem folgenden Code würden die CSS-Stile nur angewendet werden, wenn der Medientyp Bildschirm oder Drucker ist. Es reicht aus, wenn nur eine Bedingung zutrifft.

@media screen, print {
/* CSS-Stile für Bildschirme oder Drucker */
}

CSS-Stile mit "only" bei älteren Browsern verstecken

Manche Browser verstehen zwar die Media-Abfrage nach Bildschirmen, jedoch nicht die weiteren Ausdrücke. Es besteht die Gefahr, dass ein Code für Bildschirme und ab 768px (@media screen and (min-width: 768px)) wie folgt interpretiert werden würde.

@media screen {
/* CSS-Stile für Bildschirme und ab 768px */
}

Das würde dazu führen, dass die CSS-Stile bei allen Bildschirmen angewendet werden würde, egal ob die Mindestbreite 768 Pixel ist oder nicht. Als Workaround bedient man sich des Schlüsselworts only. Der folgende Code sorgt bei solchen Browsern dafür, dass die CSS-Stile nicht angewendet werden.

@media only screen and (min-width: 768px) {
/* CSS-Stile für Bildschirme und ab 768px */
}

Neuere Browser ignorieren das Schlüsselwort only. Ältere Browser interpretieren das jedoch als einen Medientyp. Sie würden den Code wie folgt interpretieren.

@media only {
/* CSS-Stile für Bildschirme und ab 768px */
}

Da es den Medientyp only nicht gibt, kommen die CSS-Stile nicht bei allen Bildschirmen zur Anwendung.

Weitere Medientypen

Über Media-Queries kann man nicht nur Bildschirmen CSS-Stile zuweisen. Auch Projektoren, Drucker oder auch alle Medientypen können angesprochen werden. Die Schlüsselwörter für die Medientypen sind wie folgt einzugeben.

  • Alle Medientypen: all
  • Bildschirm: screen
  • Projektor: projection
  • Drucker: print
  • Handheld: handheld
  • Fernseher: tv
  • Sprachbrowser: aural
  • Geräte mit Braillezeile: braille
  • Brailledrucker: embossed
  • Nichtgrafische Ausgabemedien: tty

Nicht alle Medientypen werden von den Browsern bzw. Geräten unterstützt. Ob und welche Medientypen unterstützt werden, sollte getestet werden. Mehrere Medientypen können kommagetrennt angegeben werden. Ein Beispielcode.

@media only screen, projection and (min-width: 768px){
/* CSS-Stile für Bildschirme oder Projektoren und ab 768px */
}

Weitere Ausdrücke für Breiten oder Höhen

Die Breiten oder Höhen können mit folgenden Schlüsselwörtern angesprochen werden.

  • width: Exakte Breite des sichtbaren Bereichs vom Browserfenster
  • min-width: Mindestbreite des sichtbares Bereichs vom Browserfenster
  • device-width: Exakte Breite der Geräteauflösung
  • min-device-width: Mindestbreite der Geräteauflösung
  • max-width: Maximalbreite des sichtbaren Bereichs vom Browserfenster
  • max-device-width: Maximalbreite der Geräteauflösung
  • height: Exakte Höhe des sichtbaren Bereichs vom Browserfenster
  • min-height: Mindesthöhe des sichtbares Bereichs vom Browserfenster
  • device-height: Exakte Höhe der Geräteauflösung
  • min-device-height: Mindesthöhe der Geräteauflösung
  • max-height: Maximalhöhe des sichtbaren Bereichs vom Browserfenster
  • max-device-height: Maximalhöhe der Geräteauflösung

Auch hierbei können mehrere Ausdrücke mit dem logischen and verknüpft werden. Ein Beispielcode.

@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* CSS-Stile für Bildschirme und ab 768px bis 1024px */
}

Zu beachten ist hierbei insbesondere, dass es einen Unterschied gibt zwischen dem sichtbaren Bereich des Browserfensters und der Geräteauflösung. Geschieht die Abhängigkeit von der Geräteauflösung, spielt es keine Rolle, ob das Browserfenster verkleinert oder vergrößert wird. Daher erfolgt die Abhängigkeit meistens vom sichtbaren Bereich des Browserfensters.

CSS-Stile abhängig vom Seitenverhältnis

CSS-Stile können auch vom Seitenverhältnis abhängig gemacht werden. Beispielsweise hat eine Auflösung von 1024 x 768 Pixeln ein Seitenverhältnis von 4/3. Geläufig ist auch ein Seitenverhältnis von 16/9. Diese werden mit folgenden Schlüsselwörtern angesprochen.

  • aspect-ratio: Seitenverhältnis des sichtbaren Bereichs vom Browserfenster
  • device-aspect-ratio: Seitenverhältnis der Geräteauflösung
  • min-aspect-ratio: Mindestseitenverhältnis des sichtbaren Bereichs vom Browserfenster
  • min-device-aspect-ratio: Mindestseitenverhältnis der Geräteauflösung
  • max-aspect-ratio: Maximalseitenverhältnis des sichtbaren Bereichs vom Browserfenster
  • max-device-aspect-ratio: Maximalseitenverhältnis der Geräteauflösung

Das Verhältnis zwischen der Breite und Höhe wird mit einem Schrägstrich angegeben. Auch hierbei kann zwischen dem sichtbaren Bereich des Browserfensters und der Geräteauflösung unterschieden werden. Es ist außerdem unerheblich, welche Zahlen man eingibt, solange das Verhältnis identisch ist. Beispielsweise könnte man statt 4/3 auch 8/6 oder 12/9 angeben und das Verhältnis würde gleich bleiben. Ein Beispielcode.

@media only screen and (aspect-ratio: 4/3) {
/* CSS-Stile für Bildschirme und mit Seitenverhältnis 4/3 */
}

CSS-Stile abhängig von der Orientierung

Smartphones, Tablets oder auch gewöhnliche Monitore sind meistens nicht quadratisch, sondern rechteckig. Bei Monitoren ist es nicht üblich, dass man sie dreht und die Orientierung ist daher meistens Querformat. Smartphones und Tablets sind jedoch handlich und die Ausrichtung kann einfach von Hoch- auf Querformat und umgekehrt geändert werden, wovon auch reichlich Gebrauch gemacht wird. Die CSS-Stile können davon abhängig gemacht werden. Das Schlüsselwort hierfür ist orientation.

  • orientation: landscape (Querformat)
  • orientation: portrait (Hochformat)

Ein Beispielcode.

@media only screen and (orientation: landscape) {
/* CSS-Stile für Bildschirme und im Querformat */
}

@media only screen and (orientation: portrait) {
/* CSS-Stile für Bildschirme und im Hochformat */
}

Zu beachten ist hierbei, dass nicht zwischen dem sichtbaren Bereich des Browserfensters und der Geräteauflösung unterschieden wird. Die Orientierung bezieht sich auf den sichtbaren Bereich des Browserfensters.

CSS-Stile abhängig von der Geräteauflösung

Möchte man die CSS-Stile abhängig von der Geräteauflösung anwenden, kann man das mit folgenden Schlüsselwörtern erreichen.

  • resolution: Auflösung
  • min-resolution: Mindestauflösung
  • max-resolution: Maximale Auflösung

Als Werte gibt man dabei die Dichtigkeit an. Ein Beispielcode.

@media only screen and (resolution: 192dpi) {
/* CSS-Stile für Bildschirme und für Auflösung mit 192dpi */
}

Die Maßeinheit dpi bedeutet dots per inch (Punkte pro Zoll) und ist weit verbreitet. Es können auch andere Maßeinheiten verwendet werden, z.B. dppx oder dpcm. Allerdings ist nicht immer gewährleistet, dass alle Browser damit richtig umgehen.

CSS-Stile in Abhängigkeit von Farben

Möchte man die CSS-Stile in Abhängigkeit von den Farbeinstellungen anwenden, so stehen hierfür folgende Schlüsselwörter zur Verfügung.

  • color: Die Geräte verwenden eine bestimmte Anzahl an Bits, die pro Farbe verwendet werden. Das sind normalerweise 8 Bits. Wenn keine Farben angezeigt werden, ist der Wert 0. Die CSS-Stile können davon abhängig gemacht werden.
  • min-color: Die minimale Anzahl an Bits, die pro Farbe verwendet werden.
  • max-color: Die maximale Anzahl an Bits, die pro Farbe verwendet werden.
  • color-index: Geräte können in der Farbtabelle die Anzahl der verwendeten Farben bereithalten. Normalerweise wird eine Farbtabelle aber kaum genutzt und der Rückgabewert ist meistens 0.
  • min-color-index: Die minimale Anzahl an Farben, die in der Farbtabelle beschrieben werden.
  • max-color-index: Die maximale Anzahl an Farben, die in der Farbtabelle beschrieben werden.
  • monochrome: Auch Geräte, die keine Farben verwenden, sondern nur Graustufen (schwarz/weiß), verwenden eine gewisse Anzahl an Bits für die Graustufentöne. Über das Schlüsselwort monochrome können die CSS-Stile davon abhängig gemacht werden. Bei Geräten mit Farben ist der Wert 0.
  • min-monochrome: Minimale Anzahl an Bits, die für Graustufen verwendet werden.
  • max-monochrome: Maximale Anzahl an Bits, die für Graustufen verwendet werden.

CSS-Stile abhängig vom Bildaufbau

Bei Fernsehern (Medientyp tv) erfolgt der Bildaufbau entweder progressiv (wie beim PC-Monitor) oder zeilenweise. Die CSS-Stile können davon abhängig gemacht werden. Hierfür wird das Schlüsselwort scan (Abtasten) verwendet.

  • scan: progressive (Progressiver Bildaufbau)
  • scan: interlace (Zeilenweise Bildaufbau)

CSS-Stile abhängig vom Raster

Manche Geräte stellen die Inhalte in einem Raster dar. Ist ein Raster vorhanden, ist der Wert 1, ansonsten 0. Das kann genutzt werden, um die CSS-Stile davon abhängig zu machen. Hierfür wird das Schlüsselwort grid verwendet.

  • grid: 1 (Mit Rasterdarstellung)
  • grid: 0 (Ohne Rasterdarstellung)

Sonstiges

Neben diesen können die CSS-Stile von weiteren Merkmalen abhängig gemacht werden, die jedoch meistens browserspezifisch sind, z.B. -o-min-device-pixel-ratio. Solange diese nicht zu den offiziellen Spezifikationen gehören, sollte der Effekt vor dem produktiven Einsatz mit den gängigen Browsern geprüft werden.