CSS Media Queries

Mit Media Queries lassen sich die Styles einer Website an die Bildschirmgröße, die Geräteeigenschaften oder die Benutzerpräferenzen anpassen. Dies ist eine grundlegende Technik des Responsive Webdesigns, die es ermöglicht, dass dieselbe Website auf verschiedenen Geräten optimal angezeigt wird.

Grundbegriffe

Die Syntax einer Media Query beginnt mit dem Schlüsselwort @media, gefolgt von einer oder mehreren Bedingungen. Wenn die Bedingung erfüllt ist, werden die enthaltenen CSS-Regeln angewendet. Die häufigsten Bedingungen sind min-width und max-width, die sich auf die Bildschirmbreite beziehen.

Im folgenden Beispiel wird gezeigt, wie man die Hintergrundfarbe ändert, wenn die Bildschirmbreite kleiner als 600px ist.

Komplexere Bedingungen

In Media Queries können logische Operatoren wie and, not und only verwendet werden. So können wir min-width und max-width kombinieren, um bestimmte Bereiche gezielt anzusprechen. Damit lässt sich genau bestimmen, auf welchen Geräten welche Styles gelten.

Häufig verwendete Bedingungen

Media Queries können nicht nur Breite und Höhe prüfen. Wir können auch die orientation-Bedingung für Hoch- oder Querformat sowie prefers-color-scheme für Dark- oder Light-Mode verwenden.

Bedingung	Verwendung
max-width	Apply styles up to a certain width
min-width	Apply styles from a certain width upwards
orientation	Target portrait or landscape devices
prefers-color-scheme	Adapt to dark or light mode preferences

Tipps zur Verwendung von Media Queries

Für responsives Webdesign ist der richtige Einsatz von Media Queries unerlässlich. Hier einige Tipps für die effektive Nutzung:

Verwende den Mobile-First-Ansatz: Designe zuerst für kleine Bildschirme und erweitere dann für größere.
Nutze einheitliche und gut dokumentierte Breakpoints, um die Teamarbeit zu erleichtern.
Vergiss die Benutzerpräferenzen nicht, zum Beispiel die Unterstützung des Dark-Mode mit prefers-color-scheme.