CSS-Media-Queries

Das Modul CSS-Media-Queries ermöglicht das Testen und Abfragen von Viewport-Werten und Funktionen des Browsers oder Geräts, um CSS-Stile konditional 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 die bedingte Einstellung von CSS-Stilen abhängig von den Eigenschaften oder Werten eines Geräts. Üblicherweise wird eine Media Query basierend auf der Viewport-Größe verwendet, um auf Geräten mit unterschiedlichen Bildschirmgrößen geeignete Layouts festzulegen – zum Beispiel drei Spalten auf einem breiten Bildschirm oder eine Spalte auf einem schmalen Bildschirm.

Andere gängige Beispiele beinhalten 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 angezeigt wird, oder das Erhöhen der Größe von Schaltflächen, um eine größere Trefferfläche auf Touchscreens zu bieten.

In CSS verwenden Sie die @media at-rule, um einen Teil 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 auch Container Queries verwendet werden, die es ermöglichen, Stile basierend auf der Größe eines enthaltenden Elements und nicht auf dem Viewport oder anderen Gerätemerkmalen anzuwenden.

Referenz

At-Regeln und Deskriptoren

• @import
• @media
  • 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
  • horizontal-viewport-segments
  • 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
  • vertical-viewport-segments
  • video-dynamic-range
  • width

Das CSS-Media-Queries-Level-5-Modul führt auch die Deskriptoren environment-blending, nav-controls und video-color-gamut für @media ein. Derzeit unterstützen keine Browser diese Funktionen.

Datentypen und Operatoren

• <media-types>
• <media-features>
• <resolution>
• Logische Operatoren

Glossarbegriffe

• media
• media query

Leitfäden

Media Queries verwenden

Führt in Media Queries ein, erklärt deren Syntax sowie die Operatoren und Medienfunktionen, die zur Konstruktion von Media-Query-Ausdrücken verwendet werden.

Lernen: Grundlagen der Media Queries

Einführung in Media Queries und Ansätze, um sie zur Erstellung responsiver Designs zu verwenden.

Media Queries testen

Beschreibt, wie Media Queries im JavaScript-Code verwendet werden können, um den Status eines Geräts zu bestimmen und Listener einzurichten, die den Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).

Media Queries für Barrierefreiheit verwenden

Lernen Sie, wie Media Queries Benutzern helfen können, Ihre Website besser zu verstehen.

Drucken

Tipps und Techniken zur Verbesserung der Druckausgabe von Webinhalten.

Responsive Bilder

Lernen Sie, wie Sie Media Queries mit sizes verwenden, um responsive Bildlösungen auf Websites zu implementieren.

Verwandte Konzepte

• CSS Containment Modul
  • @container At-Regel
  • Container Queries verwenden
  • Größen- und Stil-Container-Queries verwenden
• CSS Bedingte Regeln Modul
  • @supports At-Regel
  • Feature Queries verwenden
• CSS Umgebungsvariablen
  • env() Funktion
• CSS Paged Media Modul
  • @page At-Regel
• CSS Objektmodell Modul
  • MediaQueryList Schnittstelle
    • matches Eigenschaft
    • media Eigenschaft
    • change Ereignis
  • MediaList Schnittstelle
    • mediaText Eigenschaft
  • MediaQueryListEvent Objekt
• Device Posture API
  • device-posture Deskriptor
• HTML
  • sizes Attribut für <img>, <link>, und <source> für <picture>
  • media Attribut für <link>, <source>, und <style> HTML
  • <meta name="viewport">
• SVG media Attribut

Spezifikationen

Siehe auch

• Container Queries
• Verwendung der srcset und sizes Attribute
• CSS Paged Media
• Verwenden Sie @supports, um Stile anzuwenden, die von der Unterstützung verschiedener CSS-Technologien im Browser abhängen.