CSS media queries
Das Modul CSS media queries ermöglicht das Testen und Abfragen von Viewport-Werten sowie von Browser- oder Gerätemerkmalen, um bedingt CSS-Stile basierend auf der aktuellen Benutzerumgebung anzuwenden. Media Queries werden in der CSS-Regel @media
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 der Existenz oder dem Wert von Gerätemerkmalen. Es ist üblich, eine Media Query basierend auf der Viewport-Größe zu nutzen, um geeignete Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen festzulegen — beispielsweise 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, wenn eine Seite im Hoch- oder Querformat angezeigt wird, oder das Vergrößern von Schaltflächen, um eine größere Trefffläche auf Touchscreens bereitzustellen.
In CSS verwenden Sie die @media
At-Regel, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Um ein gesamtes 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, statt auf den Viewport oder andere Gerätemerkmale.
Referenz
At-Regeln
Deskriptoren
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
device-height
device-width
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-data
prefers-reduced-motion
prefers-reduced-transparency
resolution
scan
scripting
update
video-dynamic-range
width
Hinweis: CSS Media Queries Level 5 führt fünf @media
-Deskriptoren ein, die nicht implementiert wurden: environment-blending
, horizontal-viewport-segments
, nav-controls
, vertical-viewport-segments
und video-color-gamut
.
Hinweis: CSS Media Queries Level 4 hat drei @media
-Deskriptoren veraltet erklärt: 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, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.
- Einsteigerleitfaden für Media Queries
-
Einführung in Media Queries und Ansätze für deren Nutzung, um responsive Designs zu erstellen.
- Testen von Media Queries
-
Beschreibt, wie Media Queries in Ihrem JavaScript-Code verwendet werden können, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder den Browser in der Größe ändert).
- Verwendung von Media Queries für Barrierefreiheit
-
Erfahren Sie, wie Media Queries Benutzern helfen können, Ihre Website besser zu verstehen.
-
Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.
- Erlernen: Responsive Bilder
-
Erfahren Sie, wie Sie Media Queries mit
sizes
verwenden, um responsive Bildlösungen auf Websites zu implementieren.
Verwandte Konzepte
- CSS Containment Modul
- CSS bedingte Regeln Modul
@supports
At-Regel- Verwendung von Feature Queries
- CSS Paged Media Modul
@page
At-Regel
- CSS Objekt Modell Modul
MediaQueryList
SchnittstelleMediaList
SchnittstellemediaText
Eigenschaft
MediaQueryListEvent
Objekt
- HTML
- SVG
media
Attribut
Spezifikationen
Specification |
---|
Media Queries Level 3 |
Media Queries Level 4 |
Media Queries Level 5 |
Siehe auch
- Container Queries
- Verwenden der
srcset
undsizes
Attribute - CSS Paged Media
- Verwenden Sie
@supports
, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.