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 je nach aktuellem Benutzerumfeld bedingt anzuwenden. Media Queries werden in der CSS-@media-Regel sowie in anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.

Media Queries sind ein wesentlicher Bestandteil des Responsive Designs. Sie ermöglichen es, CSS-Stile abhängig von der Präsenz oder dem Wert von Geräteeigenschaften bedingt festzulegen. Häufig wird eine Media Query basierend auf der Viewport-Größe verwendet, um auf Geräten mit unterschiedlichen Bildschirmgrößen passende Layouts festzulegen – zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Weitere häufige Beispiele sind die Erhöhung 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 auf Touchscreens eine größere Trefferfläche bereitzustellen.

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

Bei der Gestaltung 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äteeigenschaften.

Verwendung von Media Queries: Einführung in Media Queries, deren Syntax sowie die Operatoren und Media-Funktionen, die zur Erstellung von Media Query-Ausdrücken verwendet werden.
Lernen: Grundlagen der Media Queries: Einführung in Media Queries und Ansätze, um mit diesen responsive Designs zu erstellen.
Media Queries testen: Beschreibt, wie Media Queries in JavaScript-Code verwendet werden können, um den Status eines Geräts zu bestimmen und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z.B. wenn der Benutzer den Bildschirm dreht oder den Browser vergrößert).
Verwendung von Media Queries für Zugänglichkeit: Lernen Sie, wie Media Queries den Benutzern helfen können, Ihre Website besser zu verstehen.
Drucken: Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.
Responsive Bilder: Lernen Sie, wie Media Queries zusammen mit sizes für responsive Bildlösungen auf Webseiten eingesetzt werden können.