CSS Media Queries

Das CSS Media Queries-Modul ermöglicht das Testen und Abfragen von Ansichtsfensterwerten sowie von Browser- oder Gerätemerkmalen, 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 zentraler Bestandteil des responsiven Designs. Sie ermöglichen die bedingte Einstellung von CSS-Stilen abhängig von vorhandenen oder definierten Gerätecharakteristiken. Es ist üblich, ein Media Query basierend auf der Viewport-Größe zu verwenden, um auf Geräten mit unterschiedlichen Bildschirmgrößen geeignete Layouts festzulegen — zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.

Weitere typische Beispiele sind das Erhöhen 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 betrachtet wird, oder das Vergrößern von Schaltflächen, um eine größere Trefferfläche auf Touchscreens bereitzustellen.

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

Beim Entwerfen von wiederverwendbaren HTML-Komponenten können Sie auch Container Queries verwenden, die es ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements und nicht auf dem Viewport oder anderen Gerätemerkmalen anzuwenden.

Referenz

At-Regeln

Deskriptoren

Das CSS Media Queries Level 5 Modul führt auch die environment-blending, horizontal-viewport-segments, nav-controls, vertical-viewport-segments und video-color-gamut @media-Deskriptoren ein. Aktuell unterstützen keine Browser diese Funktionen.

Hinweis: CSS Media Queries Level 4 hat drei @media-Deskriptoren veraltet: device-aspect-ratio, device-height, und device-width.

Datentypen und Operatoren

Glossarbegriffe

Leitfäden

Verwendung von Media Queries

Einführung in Media Queries, deren Syntax, sowie die Operatoren und Medienmerkmale zur Erstellung von Media Query-Ausdrücken.

Lernen: Grundlagen der Media Queries

Einführung in Media Queries und Ansätze zu ihrer Verwendung zur Erstellung von responsiven Designs.

Testen von Media Queries

Beschreibt, wie man Media Queries im eigenen JavaScript-Code verwendet, um den Zustand eines Geräts zu bestimmen und Listener einzurichten, die den Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (zum Beispiel wenn der Benutzer den Bildschirm dreht oder den Browser neu dimensioniert).

Verwendung von Media Queries für Barrierefreiheit

Erfahren Sie, wie Media Queries Benutzern helfen können, Ihre Website besser zu verstehen.

Drucken

Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.

Responsiven Bilder

Erfahren Sie, wie Media Queries mit sizes verwendet werden, um Lösungen für responsive Bilder auf Websites umzusetzen.

Verwandte Konzepte

Spezifikationen

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

Siehe auch