CSS-Media-Queries
Das Modul der CSS-Media-Queries ermöglicht das Testen und Abfragen von Viewport-Werten sowie von Browser- oder Geräteeigenschaften, um CSS-Stile bedingt basierend auf der aktuellen Benutzerumgebung anzuwenden. Media Queries werden in der CSS-@media-Regel und in anderen Kontexten und Sprachen wie HTML und JavaScript verwendet.
Media Queries sind ein wesentlicher Bestandteil des responsiven Designs. Sie ermöglichen es, CSS-Stile bedingt abhängig von der Anwesenheit oder dem Wert von Geräteeigenschaften zu setzen. Es ist üblich, eine Media Query basierend auf der Viewport-Größe zu verwenden, um auf Geräten mit unterschiedlichen Bildschirmgrößen geeignete Layouts festzulegen - zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine einzelne Spalte auf einem schmalen Bildschirm.
Andere gängige Beispiele umfassen das Erhöhen der Schriftgröße und das Verbergen von Navigationsmenüs beim Drucken einer Seite, das Anpassen des Abstands zwischen Absätzen, wenn eine Seite im Hoch- oder Querformat angezeigt wird, oder das Erhöhen der Größe von Schaltflächen, um auf Touchscreens einen größeren Trefferbereich zu bieten.
In CSS verwenden Sie die @media-Regel, um bedingt einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query anzuwenden. Um bedingt ein gesamtes Stylesheet anzuwenden, verwenden Sie @import.
Beim Entwerfen von wiederverwendbaren HTML-Komponenten können Sie auch Container-Queries verwenden, die es Ihnen ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements und nicht auf dem Viewport oder anderen Geräteeigenschaften anzuwenden.
Referenz
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: 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 Medieneigenschaften, die zum Erstellen von Media Query-Ausdrücken verwendet werden.
- Lernen: Grundlagen der Media Queries
-
Einführung in Media Queries und Ansätze, um mit ihnen responsive Designs zu erstellen.
- Medienabfragen testen
-
Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu bestimmen und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder den Browser verkleinert).
- Media Queries für Barrierefreiheit verwenden
-
Lernen Sie, wie Media Queries Benutzern helfen können, Ihre Website besser zu verstehen.
-
Tipps und Techniken zur Verbesserung der Druckerausgabe von Webinhalten.
- Responsive Bilder
-
Lernen Sie, wie Sie Media Queries mit
sizesverwenden, um responsive Bildlösungen auf Websites zu implementieren.
Verwandte Konzepte
- CSS Containment Modul
- CSS Bedingte Regeln Modul
- CSS Seitenbasierte Medien Modul
@pageRegel
- 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 Queries
- Verwendung der
srcsetundsizesAttribute - CSS Seitenbasierte Medien
- Verwenden Sie
@supports, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.