CSS-Media-Queries
Das Modul CSS-Media-Queries ermöglicht das Testen und Abfragen von Viewport-Werten sowie Browser- oder Gerätefunktionen, um bedingt 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 von den Eigenschaften eines Geräts. Häufig wird eine Media-Query basierend auf der Viewport-Größe verwendet, um geeignete Layouts auf Geräten mit unterschiedlichen Bildschirmgrößen zu setzen – zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.
Andere häufige Beispiele sind 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 betrachtet wird, oder das Vergrößern von Schaltflächen, um eine größere Trefffläche auf Touchscreens bereitzustellen.
In CSS verwenden Sie die @media-Regel at-rule, um bedingt einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media-Query anzuwenden. Um ein ganzes Stylesheet bedingt anzuwenden, verwenden Sie @import.
Beim Entwerfen von wiederverwendbaren HTML-Komponenten können Sie auch Container-Queries verwenden, mit denen Sie Stile basierend auf der Größe eines enthaltenen Elements und nicht auf dem Viewport oder anderen Geräteeigenschaften anwenden können.
Referenz
At-Rules
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 bisher nicht implementiert wurden: environment-blending, horizontal-viewport-segments, nav-controls, vertical-viewport-segments, und video-color-gamut
Hinweis:
CSS-Media-Queries Level 4 setzte drei @media-Deskriptoren außer Kraft: 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 für deren Verwendung zur Erstellung responsiver Designs.
- Testen von Media-Queries
-
Beschreibt, wie Sie Media-Queries in Ihrem JavaScript-Code verwenden können, um den Zustand eines Geräts zu bestimmen und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media-Queries ändern (zum Beispiel, wenn der Benutzer den Bildschirm dreht oder den Browser vergrößert).
- Verwendung von Media-Queries für Barrierefreiheit
-
Erlernen Sie, wie Media-Queries dazu beitragen können, dass Benutzer Ihre Website besser verstehen.
-
Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.
- Responsive Bilder
-
Lernen Sie, wie Sie Media-Queries mit
sizesverwenden, um responsive Bildlösungen auf Websites umzusetzen.
Verwandte Konzepte
- CSS-Kontainment-Modul
- CSS-bediente Regeln-Modul
- CSS-gedruckte Medien-Modul
@pageat-rule
- 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-Querien
- Verwendung der
srcset- undsizes-Attribute - CSS-gedruckte Medien
- Verwenden Sie
@supports, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.