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 basierend auf 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 zentraler Bestandteil des responsiven Designs. Sie ermöglichen die bedingte Festlegung von CSS-Stilen abhängig von den Merkmalen eines Geräts. Häufig verwendet man Media Queries, die auf der Viewport-Größe basieren, um geeignete Layouts für Geräte mit unterschiedlichen Bildschirmgrößen einzurichten – zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Weitere häufige Beispiele umfassen das Vergrößern der Schriftgröße und das Ausblenden von Navigationsmenüs beim Drucken einer Seite, das Anpassen des Abstands zwischen Absätzen, je nachdem, ob eine Seite im Hoch- oder Querformat betrachtet wird, oder das Vergrößern von Schaltflächen, um auf Touchscreens eine größere Trefferfläche bereitzustellen.

Verwenden Sie in CSS die @media At-Regel, um einen Teil eines Stylesheets bedingt anzuwenden, basierend auf dem Ergebnis einer Media Query. Um ein ganzes Stylesheet bedingt anzuwenden, verwenden Sie @import.

Bei der Gestaltung wiederverwendbarer HTML-Komponenten können Sie auch Container Queries verwenden. Diese erlauben es, Stile basierend auf der Größe eines enthaltenen Elements (anstatt des Viewports oder anderer Geräteeigenschaften) anzuwenden.

Referenz

At-Regeln

Deskriptoren

Datentypen und Operatoren

Glossarbegriffe

Leitfäden

Media Queries verwenden

Einführung in Media Queries, deren 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 zu deren Verwendung, um responsive Designs zu erstellen.

Media Queries testen

Beschreibung, wie Media Queries in JavaScript verwendet werden können, um den Status eines Geräts zu bestimmen und Listener einzurichten, die den Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. beim Drehen des Bildschirms oder Ändern der Browsergröße).

Media Queries für Barrierefreiheit nutzen

Lernen Sie, wie Media Queries den Nutzern 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 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