CSS Media Queries

Das CSS Media Queries-Modul ermöglicht das Testen und Abfragen von Viewport-Werten sowie Browser- oder Geräteeigenschaften, um CSS-Stile bedingt basierend auf dem aktuellen Benutzerumfeld 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 Anwendung von CSS-Stilen abhängig von der Präsenz oder dem Wert von Geräteeigenschaften. 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 einzige Spalte auf einem schmalen Bildschirm.

Weitere 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 das Vergrößern von Schaltflächen, um eine größere Trefffläche auf Touchscreens bereitzustellen.

In CSS verwenden Sie die @media At-Regel, um bedingt einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query anzuwenden. Um bedingt ein komplettes Stylesheet anzuwenden, verwenden Sie @import.

Beim Entwerfen wiederverwendbarer HTML-Komponenten können Sie auch Container Queries verwenden, die es ermöglichen, Stile basierend auf der Größe eines enthaltenen Elements anstelle des Viewports oder anderer Geräteeigenschaften anzuwenden.

Verwendung von Media Queries: Einführung in Media Queries, ihre Syntax und die Operatoren und Medienfunktionen, die verwendet werden, um Media Query-Ausdrücke zu konstruieren.
Lernen: Grundlagen der Media Query: Einführung in Media Queries und Ansätze zu ihrer Verwendung für die Erstellung von Responsive Designs.
Testen von Media Queries: Beschreibt, wie Media Queries in Ihrem JavaScript-Code verwendet werden können, um den Zustand 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 in der Größe ändert).
Verwendung von Media Queries für Barrierefreiheit: Lernen Sie, wie Media Queries Benutzern helfen können, Ihre Webseite 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 auf Websites responsive Bildlösungen zu implementieren.