CSS-Media-Queries

Das CSS-Media-Queries-Modul ermöglicht das Testen und Abfragen von Viewport-Werten sowie von Browser- oder Geräteeigenschaften, um CSS-Stile abhängig von der aktuellen Benutzerumgebung 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 Schlüsselaspekt des responsive Designs. Sie gestatten die bedingte Festlegung von CSS-Stilen in Abhängigkeit von der Präsenz oder dem Wert von Geräteeigenschaften. Häufig wird eine Media-Query basierend auf der Viewport-Größe verwendet, um ein passendes Layout für Geräte mit unterschiedlichen Bildschirmgrößen festzulegen – beispielsweise drei Spalten auf einem breiten Bildschirm oder eine 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 der Abstände zwischen Absätzen, wenn eine Seite im Hoch- oder Querformat angesehen wird, oder das Vergrößern von Schaltflächen, um auf Touchscreens größere Trefferflächen bereitzustellen.

In CSS verwenden Sie die @media-At-Regel, um Teile eines Stylesheets basierend auf dem Ergebnis einer Media-Query bedingt anzuwenden. Um ein ganzes 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 enthaltenen Elements anzuwenden, anstatt auf den Viewport oder andere Geräteeigenschaften.

Referenz

At-Regeln

Deskriptoren

Datentypen und Operatoren

Glossarbegriffe

Leitfäden

Verwendung von Media-Queries

Einführung in Media-Queries, ihre Syntax sowie die Operatoren und Media-Features, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.

Lernen: Grundlagen zu Media-Queries

Einführung in Media-Queries und Ansätze, sie zur Erstellung von responsiven Designs zu nutzen.

Media-Queries testen

Beschreibt, wie Media-Queries in JavaScript-Code verwendet werden können, um den Status eines Geräts zu bestimmen, und wie Listener eingerichtet werden, die den Code benachrichtigen, wenn sich die Ergebnisse von Media-Queries ändern (z. B. wenn der Bildschirm gedreht oder das Browserfenster geändert wird).

Verwendung von Media-Queries für Barrierefreiheit

Lernen Sie, wie Media-Queries den Nutzern helfen können, Ihre Website besser zu verstehen.

Drucken

Tipps und Techniken, um die Druckausgabe von Webinhalten zu verbessern.

Responsive Bilder

Lernen Sie, wie Media-Queries mit sizes verwendet werden können, um responsive Bildlösungen auf Websites zu implementieren.

Verwandte Konzepte

Spezifikationen

Specification
Media Queries Level 3
Media Queries Level 4
Media Queries Level 5

Siehe auch