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 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 responsiven Designs. Sie ermöglichen die bedingte Einstellung von CSS-Stilen in Abhängigkeit von den Eigenschaften eines Geräts. 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.

Weitere häufige Beispiele sind 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 für eine größere Trefffläche auf Touchscreens.

In CSS verwenden Sie die @media-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 von wiederverwendbaren HTML-Komponenten können auch Container-Queries verwendet werden, die das Anwenden von Stilen basierend auf der Größe eines enthaltenen Elements anstelle des Viewports oder anderer Geräteeigenschaften erlauben.

Verwendung von Media Queries: Einführung in Media Queries, deren Syntax und die Operatoren und Medienmerkmale, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.
Lernen: Grundlagen der Media Queries: Einführung in Media Queries und Ansätze für deren Verwendung zur Erstellung von responsiven Designs.
Testen von Media Queries: Beschreibt, wie Media Queries in Ihrem JavaScript-Code verwendet werden, um den Zustand eines Geräts zu bestimmen und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (beispielsweise, wenn der Benutzer den Bildschirm dreht oder den Browser vergrößert).
Media Queries für Barrierefreiheit verwenden: Erfahren Sie, wie Media Queries Benutzern helfen können, Ihre Website besser zu verstehen.
Drucken: Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.
Responsive Bilder: Erfahren Sie, wie Sie Media Queries mit sizes verwenden, um responsive Bildlösungen auf Websites umzusetzen.