CSS media queries

Das Modul CSS media queries ermöglicht das Testen und Abfragen von Viewport-Werten sowie von Browser- oder Gerätemerkmalen, um bedingt CSS-Stile basierend auf der aktuellen Benutzerumgebung anzuwenden. Media Queries werden in der CSS-Regel @media und in anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.

Media Queries sind ein zentraler Bestandteil des responsiven Designs. Sie ermöglichen die bedingte Einstellung von CSS-Stilen abhängig von der Existenz oder dem Wert von Gerätemerkmalen. Es ist üblich, eine Media Query basierend auf der Viewport-Größe zu nutzen, um geeignete Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen festzulegen — beispielsweise drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Weitere häufige Beispiele umfassen das Vergrößern der Schriftgröße und das Ausblenden von Navigationsmenüs beim Drucken einer Seite, das Anpassen des Abstands zwischen Absätzen, wenn eine Seite im Hoch- oder Querformat angezeigt wird, oder das Vergrößern von Schaltflächen, um eine größere Trefffläche auf Touchscreens bereitzustellen.

In CSS verwenden Sie die @media At-Regel, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Um ein gesamtes Stylesheet bedingt anzuwenden, verwenden Sie @import.

Beim Entwerfen wiederverwendbarer HTML-Komponenten können Sie auch Container Queries verwenden, die es Ihnen ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements anzuwenden, statt auf den Viewport oder andere Gerätemerkmale.