CSS Media Queries

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

Media Queries sind ein wichtiger Bestandteil des responsive Designs. Sie ermöglichen die bedingte Anpassung von CSS-Stilen abhängig von den vorhandenen oder aufgerufenen Gerätemerkmalen. Oft wird eine Media Query basierend auf der Ansichtsfenstergröße verwendet, um passende Layouts für Geräte mit unterschiedlichen Bildschirmgrößen festzulegen - beispielsweise drei Spalten auf einem breiten Bildschirm oder eine Spalte auf einem schmalen Bildschirm.

Weitere übliche Beispiele beinhalten 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 betrachtet wird, oder das Vergrößern von Schaltflächen, um auf Touchscreens eine größere Trefferfläche zu bieten.

In CSS verwenden Sie die @media At-Regel, um abhängig vom Ergebnis einer Media Query Teile eines Stylesheets bedingt anzuwenden. Um ein ganzes Stylesheet bedingt anzuwenden, verwenden Sie @import.

Beim Entwerfen wiederverwendbarer HTML-Komponenten können Sie auch Container-Queries verwenden, die es ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements anstelle des Ansichtsfensters oder anderer Gerätemerkmale anzuwenden.