CSS-Media-Queries
Das CSS-Media-Queries-Modul ermöglicht das Testen und Abfragen von Viewport-Werten sowie von Browser- oder Gerätemerkmalen, um konditional CSS-Stile basierend auf der aktuellen Benutzerumgebung anzuwenden. Media-Queries werden in der CSS-@media-Regel und anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.
Media-Queries sind ein wesentlicher Bestandteil des Responsive Designs. Sie ermöglichen die bedingte Festlegung von CSS-Stilen in Abhängigkeit vom Vorhandensein oder Wert von Gerätemerkmalen. Häufig wird eine Media-Query basierend auf der Viewport-Größe verwendet, um geeignete Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen festzulegen – zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.
Andere gängige Beispiele umfassen die Erhöhung 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 die Vergrößerung von Schaltflächen, um eine größere Trefferfläche auf Touchscreens bereitzustellen.
In CSS verwenden Sie die @media At-Regel, um einen Teil eines Stylesheets bedingt basierend auf dem Ergebnis einer Media-Query anzuwenden. Um ein gesamtes 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 enthaltenden Elements statt des Viewports oder anderer Gerätemerkmale anzuwenden.
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 Media-Queries
-
Einführung in Media-Queries, deren Syntax sowie die Operatoren und Medienmerkmale, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.
- Lernen: Grundlagen der Media-Queries
-
Einführung in Media-Queries und Ansätze zu deren Nutzung zur Erstellung von Responsive Designs.
- Testing von Media-Queries
-
Beschreibt, wie Media-Queries in Ihrem JavaScript-Code verwendet werden können, um den Status eines Geräts zu bestimmen, und wie Listener eingerichtet werden, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media-Queries ändern (z.B. wenn der Benutzer den Bildschirm dreht oder den Browser anpasst).
- 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 Web-Inhalten.
- Responsive Bilder
-
Lernen Sie, wie Media-Queries mit
sizesverwendet werden können, um auf Websites responsive Bildlösungen umzusetzen.
Verwandte Konzepte
- CSS-Containment Modul
- CSS-Konditionalregeln Modul
- CSS-Paged-Media Modul
@pageAt-Regel
- CSS-Objektmodell Modul
MediaQueryListSchnittstelleMediaListSchnittstellemediaTextEigenschaft
MediaQueryListEventObjekt
- HTML
- SVG
mediaAttribut
Spezifikationen
| Specification |
|---|
| Media Queries Level 3 |
| Media Queries Level 4 |
| Media Queries Level 5 |
Siehe auch
- Container-Queries
- Verwendung der
srcsetundsizesAttribute - CSS-Paged-Media
- Verwendung von
@supports, um Stile anzuwenden, die von der Browser-Unterstützung für verschiedene CSS-Technologien abhängen.