CSS-Mediaqueries

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

Mediaqueries sind ein wesentlicher Bestandteil des Responsive Designs. Sie erlauben es, CSS-Stile je nach Vorhandensein oder Wert von Gerätemerkmalen bedingt festzulegen. Es ist üblich, eine Mediaquery basierend auf der Viewport-Größe zu verwenden, um entsprechende Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen einzurichten – zum Beispiel drei Spalten auf einem Breitbildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Weitere häufige Beispiele sind die Vergrößerung 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 Trefferfläche auf Touchscreens zu bieten.

In CSS verwenden Sie die @media At-rule, um bedingt einen Teil eines Stylesheets basierend auf dem Ergebnis einer Mediaquery anzuwenden. Um bedingt ein ganzes Stylesheet 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 anstatt auf dem Viewport oder anderen Gerätemerkmalen anzuwenden.

Verwendung von Mediaqueries: Einführung in Mediaqueries, ihre Syntax sowie die Operatoren und Media-Features, die zur Konstruktion von Mediaquery-Ausdrücken verwendet werden.
Lernen: Grundlagen der Mediaqueries: Einführung in Mediaqueries und Ansätze zur Verwendung derselben für die Erstellung von responsiven Designs.
Testen von Mediaqueries: Beschreibt, wie Medienabfragen im JavaScript-Code verwendet werden können, um den Zustand eines Geräts zu bestimmen, und wie Listener eingerichtet werden, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Medienabfragen ändern (zum Beispiel, wenn der Benutzer den Bildschirm dreht oder den Browser vergrößert).
Verwendung von Mediaqueries für Barrierefreiheit: Lernen Sie, wie Mediaqueries den Benutzern helfen können, Ihre Website besser zu verstehen.
Drucken: Tipps und Techniken zur Verbesserung der Druckerausgabe von Webinhalten.
Responsive Bilder: Lernen Sie, wie man Mediaqueries mit sizes verwendet, um responsive Bildlösungen auf Websites zu implementieren.