CSS-Media-Queries

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

Media Queries sind ein wesentlicher Bestandteil des responsiven Designs. Sie ermöglichen die bedingte Festlegung von CSS-Stilen in Abhängigkeit von der Anwesenheit oder dem Wert von Gerätecharakteristiken. Es ist üblich, eine Media Query basierend auf der Viewport Größe zu verwenden, um geeignete Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen festzulegen – zum Beispiel drei Spalten auf einem großen Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Andere gängige Beispiele umfassen das Erhöhen 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 Erhöhen der Größe von Schaltflächen, um einen größeren Berührungsbereich auf Touchscreens bereitzustellen.

In CSS verwenden Sie die @media At-Regel, um einen Teil eines Stylesheets bedingt basierend auf dem Ergebnis einer Media Query 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 enthaltenden Elements anzuwenden, anstatt auf den Viewport oder andere Gerätemerkmale.