Was ist eine Media Query?
Eine Media Query ist eine Frage, die deine Website dem Gerät stellt: Wie breit bist du? Drucken wir gerade? Mag der Nutzer lieber dunkle Seiten? Je nach Antwort gelten andere Stile.
MDN beschreibt das so: Media Queries wenden CSS abhängig vom Medientyp oder von Merkmalen wie Auflösung, Ausrichtung, Fensterbreite oder Nutzereinstellungen an. Das W3C nennt es eine Methode, bestimmte Eigenschaften des Browsers oder Geräts zu prüfen.
Ein einfaches Beispiel:
Beispiel in CSS
@media (max-width: 600px) { .spalten { flex-direction: column; } }
Heißt: Bis 600 Pixel Breite stehen die Spalten untereinander.
So ist eine Media Query aufgebaut
Drei Bausteine reichen für das Verständnis:
- Medientyp: screen, print oder all. Er ist optional, ohne Angabe gilt all.
- Merkmal in Klammern: zum Beispiel width, orientation oder hover.
- Verknüpfung: and verlangt beide Bedingungen, ein Komma wirkt wie „oder“, not dreht die Abfrage um.
Breiten schreibst du klassisch mit min-width und max-width. Die Spezifikation kennt auch die kürzere Form (width >= 30em). Beide meinen dasselbe, und die Grenze selbst zählt jeweils mit.
Damit das alles auf dem Handy greift, braucht deine Seite den Viewport-Tag width=device-width, initial-scale=1. Ohne ihn rendern mobile Browser mit Desktop-Breite, und deine Handy-Regeln gehen ins Leere.
Was du außer der Breite abfragen kannst
Viele kennen Media Queries nur für Handy und Desktop. Dabei können sie mehr:
Abfrage
Wofür
prefers-color-scheme
Heller oder dunkler Modus
prefers-reduced-motion
Weniger Bewegung gewünscht
Eigene Stile für den Ausdruck
hover
Maus oder Touch
orientation
Hoch- oder Querformat
Die beiden ersten sind laut MDN seit Januar 2020 breit verfügbar. prefers-reduced-motion ist mehr als Komfort: Große Bewegungen können bei Menschen mit Gleichgewichtsstörungen Beschwerden auslösen. Die WCAG 2.2 nennen die Abfrage als Technik, Animationen abschaltbar zu machen.
Media Query, Breakpoint, Container Query
Drei Begriffe, die oft durcheinandergehen:
- Breakpoint: der konkrete Wert, an dem das Layout umbricht. Die Media Query ist die Abfrage, der Breakpoint die Zahl darin.
- Responsive Design: der Gestaltungsansatz. Media Queries sind ein Werkzeug dafür, neben flexiblen Layouts.
- Container Query: fragt nicht das Fenster ab, sondern die Größe des Elternelements. Eine Karte passt sich so ihrem Platz an, egal ob Seitenleiste oder Hauptspalte.
Container Queries ersetzen Media Queries nicht. Fürs Seitenlayout und für Nutzereinstellungen bleibt die Media Query zuständig.
Häufige Fehler
Fehler 1 · Breakpoints nach Geräten wählen
„768 Pixel, das ist doch das iPad.“ Web.dev rät klar davon ab, Breakpoints an Geräteklassen, Marken oder Betriebssystemen auszurichten. Es gibt auch keine Standardwerte. Der Inhalt entscheidet: Zieh das Fenster auf, und wo es hässlich wird, kommt ein Breakpoint.
Fehler 2 · Zu lange Zeilen übersehen
Ein Layout kann passen, und der Text ist trotzdem unlesbar. Web.dev nennt rund 70 bis 80 Zeichen je Zeile als Richtwert. Wird es breiter, ist das ebenfalls ein Grund für einen Breakpoint.
Fehler 3 · Inhalte auf dem Handy verstecken
Was nicht passt, einfach ausblenden? Web.dev rät davon ab. Besser umbauen, denn der Handy-Besucher will dieselbe Information.
Fehler 4 · Zoom sperren
user-scalable=no im Viewport-Tag hält Menschen vom Vergrößern ab. Lass das weg, das schadet der Barrierefreiheit.
So testest du Media Queries
Die Entwicklertools deines Browsers reichen: Mit der Geräteansicht ziehst du das Fenster schmal und breit und schaust, wo es kippt. Für die eigene Zielgruppe zählt deine Webanalyse, dort siehst du die Geräteklassen deiner Besucher.
Häufige Fragen
Welche Breakpoints sollte ich verwenden?
Es gibt keine offiziellen Standardwerte. Web.dev rät, sich nach dem Inhalt zu richten und nicht nach Geräten. Wenn du mit Elementor oder einem Framework arbeitest, sind dessen Vorgaben ein brauchbarer Start, und du ergänzt, wo es klemmt.
Was ist der Unterschied zwischen Media Query und Container Query?
Eine Media Query fragt Fenster oder Gerät ab. Eine Container Query fragt die Größe des umgebenden Elements ab. Das hilft bei Bausteinen, die an verschiedenen Orten stehen.
Wie erkenne ich per CSS, ob jemand den Dark Mode nutzt?
Mit @media (prefers-color-scheme: dark). Die Abfrage liest die Einstellung aus Betriebssystem oder Browser. Darin legst du dann die dunklen Farben fest.
Brauche ich den Viewport-Tag?
Ja. Ohne ihn rendern mobile Browser mit Desktop-Breite, die Seite wirkt herausgezoomt und deine Handy-Regeln greifen nicht wie gedacht. Die meisten Themes setzen ihn bereits, ein Blick in den Quelltext schadet aber nicht.
