CSS-Media-Abfragen

Das CSS media queries-Modul ermöglicht es, die Werte des Viewports und die Merkmale von Browsern oder Geräten zu testen und abzufragen, um CSS-Stile basierend auf der aktuellen Benutzerumgebung bedingt anzuwenden. Media-Abfragen werden in der CSS-@media-Regel und in anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.

Media-Abfragen sind ein Schlüsselbestandteil des responsive Designs. Sie ermöglichen die bedingte Einstellung von CSS-Stilen in Abhängigkeit von der Präsenz oder dem Wert von Gerätemerkmalen. Es ist üblich, eine Media-Abfrage 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 Breitbildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Andere häufige Beispiele umfassen die Erhöhung der Schriftgröße und das Verbergen 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 bedingt einen Teil eines Stilblatts basierend auf dem Ergebnis einer Media-Abfrage anzuwenden. Um ein gesamtes Stilblatt bedingt anzuwenden, verwenden Sie @import.

Beim Entwerfen wiederverwendbarer HTML-Komponenten können Sie auch Container-Abfragen verwenden, die es ermöglichen, Stile basierend auf der Größe eines umschließenden Elements anzuwenden, anstatt des Viewports oder anderer Gerätemerkmale.

Verwendung von Media-Abfragen: Einführung in Media-Abfragen, deren Syntax sowie die Operatoren und Medienfeatures, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.
Lernen: Grundlagen der Media-Abfragen: Einführung in Media-Abfragen und Ansätze für deren Verwendung zur Erstellung von responsiven Designs.
Testen von Media-Abfragen: Beschreibt, wie Media-Abfragen in Ihrem JavaScript-Code verwendet werden können, um den Zustand eines Geräts zu bestimmen und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media-Abfragen ändern (z. B. wenn der Benutzer den Bildschirm dreht oder den Browser verändert).
Verwendung von Media-Abfragen für Barrierefreiheit: Erfahren Sie, wie Media-Abfragen 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-Abfragen zusammen mit sizes verwenden, um responsive Bilderlösungen auf Websites zu implementieren.