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
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 bislang 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
- 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.
-
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
- CSS Containment Modul
- CSS Bedingte Regeln Modul
@supports
At-Regel- Feature Queries verwenden
- CSS Paged Media Modul
@page
At-Regel
- CSS Objektmodell Modul
MediaQueryList
SchnittstelleMediaList
SchnittstellemediaText
Eigenschaft
MediaQueryListEvent
Objekt
- Device Posture API
device-posture
Deskriptor
- HTML
- SVG
media
Attribut
Spezifikationen
Specification |
---|
Media Queries Level 3 |
Media Queries Level 4 |
Media Queries Level 5 |
Siehe auch
- Container Queries
- Die Attribute
srcset
undsizes
verwenden - CSS Paged Media
- Verwenden Sie
@supports
, um Stile anzuwenden, die vom Browser-Support für verschiedene CSS-Technologien abhängen.