CSS Media Queries
Das Modul CSS Media Queries ermöglicht das Testen und Abfragen von Viewport-Werten sowie Browser- oder Gerätefunktionen, um CSS-Stile basierend auf der aktuellen Benutzerumgebung bedingt anzuwenden. Medienabfragen werden in der CSS-@media-Regel und anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.
Medienabfragen sind ein Schlüsselelement des responsive Designs. Sie ermöglichen es, CSS-Stile abhängig von der Präsenz oder dem Wert von Gerätemerkmalen bedingt festzulegen. Es ist üblich, eine Medienabfrage basierend auf der Viewport-Größe zu verwenden, um auf Geräten mit unterschiedlichen Bildschirmgrößen geeignete Layouts zu setzen – beispielsweise drei Spalten auf einem Breitbildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.
Andere häufige Beispiele sind die Erhöhung der Schriftgröße und das Ausblenden von Navigationsmenüs beim Drucken einer Seite, die Anpassung 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 Trefffläche auf Touchscreens zu bieten.
In CSS verwenden Sie die @media At-Regel um bedingt einen Teil eines Stylesheets basierend auf dem Ergebnis einer Medienabfrage anzuwenden. Um bedingt ein ganzes Stylesheet anzuwenden, verwenden Sie @import.
Beim Entwickeln von wiederverwendbaren HTML-Komponenten können Sie auch Container-Abfragen verwenden, die es ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements anzuwenden, anstatt auf den Viewport oder andere Gerätemerkmale.
Referenz
At-Regeln
Deskriptoren
any-hoverany-pointeraspect-ratiocolorcolor-gamutcolor-indexdevice-aspect-ratiodevice-heightdevice-widthdisplay-modedynamic-rangeforced-colorsgridheighthoverinverted-colorsmonochromeorientationoverflow-blockoverflow-inlinepointerprefers-color-schemeprefers-contrastprefers-reduced-dataprefers-reduced-motionprefers-reduced-transparencyresolutionscanscriptingupdatevideo-dynamic-rangewidth
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 Medienabfragen
-
Führt in Medienabfragen, ihre Syntax sowie die verwendeten Operatoren und Medienfunktionen zur Erstellung von Medienabfrageausdrücken ein.
- Erlernen: Grundlagen der Medienabfragen
-
Einführung in Medienabfragen und Ansätze für deren Verwendung zur Erstellung von responsive Designs.
- Testen von Medienabfragen
-
Beschreibt, wie Medienabfragen im JavaScript-Code verwendet werden, um den Zustand eines Geräts zu bestimmen, und wie Listener eingerichtet werden, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Medienabfragen ändern (zum Beispiel wenn der Benutzer den Bildschirm dreht oder den Browser ändert).
- Verwendung von Medienabfragen für Barrierefreiheit
-
Lernen Sie, wie Medienabfragen Benutzern helfen können, Ihre Website besser zu verstehen.
-
Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.
- Responsive Bilder
-
Lernen Sie, wie Medienabfragen mit
sizesverwendet werden, um responsive Bildlösungen auf Websites zu implementieren.
Verwandte Konzepte
- CSS Containment Modul
- CSS Bedingte Regeln Modul
@supportsAt-Regel- Verwendung von Feature-Abfragen
- CSS Pagination Modul
@pageAt-Regel
- CSS Objektmodell Modul
MediaQueryListSchnittstelleMediaListSchnittstellemediaTextEigenschaft
MediaQueryListEventObjekt
- Device Posture API
device-postureDeskriptor
- HTML
- SVG
mediaAttribut
Spezifikationen
| Specification |
|---|
| Media Queries Level 3 |
| Media Queries Level 4 |
| Media Queries Level 5 |
Siehe auch
- Container-Abfragen
- Verwendung der
srcsetundsizesAttribute - CSS Pagination
- Verwenden Sie
@supportsum Stile anzuwenden, die von der Unterstützung des Browsers für verschiedene CSS-Technologien abhängen.