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
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, 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.
-
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
- CSS-Containment-Modul
- CSS-Bedingungsregeln-Modul
- CSS-Paged-Media-Modul
@page
-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
- Verwendung der
srcset
- undsizes
-Attribute - CSS-Paged-Media
- Verwendung von
@supports
, um Stile anzuwenden, die von der Browserunterstützung verschiedener CSS-Technologien abhängen.