Media Queries: Wenn dies, dann jenes CSS

vom 24.11.2025 von Mark Manns

Eine Media Query ist eine Bedingung ums CSS herum: Die Regeln darin gelten nur, wenn die Bedingung zutrifft. Meistens fragt man die Bildschirmbreite ab, es geht aber auch nach Ausrichtung, Farbschema oder Nutzervorlieben. Media Queries sind das Rückgrat von Responsive Design.

Syntax und Beispiel

CSS-Code

.spalten {
    display: flex;
    gap: 16px;
}

@media (max-width: 720px) {
    .spalten {
        flex-direction: column;   /* auf schmalen Schirmen stapeln */
    }
}

max-width: 720px heißt "bis 720 Pixel Fensterbreite", min-width entsprechend "ab". Beide lassen sich kombinieren. Genau nach diesem Muster stapelt sich auch dieses Wiki auf dem Handy: Die Menüleiste weicht dem Klappmenü, die Kacheln der Startseite rutschen untereinander, alles über eine Handvoll solcher Blöckke.

Breakpoints: Wo zieht man die Grenzen?

Die ehrliche Antwort: dort wo dein Layout bricht. Verkleinere das Fenster langsam und setze eine Query an der Stelle, an der es unangenehm wird, statt magische Gerätezahlen aus Listen zu kopieren. Zwei bis drei Breakpoints reichen den meisten Seiten völlig. Und wer mobile-first arbeitet (Basis-CSS für schmal, min-width-Queries für breiter), hat auf den schwächsten Geräten automatisch das schlankeste CSS.

Mehr als Breite: Nutzervorlieben abfragen

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media (prefers-color-scheme: dark) {
    /* Regeln für Nutzer mit Dunkelmodus */
}

prefers-reduced-motion greift, wenn jemand im Betriebssystem reduzierte Bewegung eingestellt hat, aus Vorliebe oder weil Animationen Übelkeit oder Anfälle auslösen können. Eine Website die blinkt wie diese hier hat die Pflicht, das zu respektieren: Genau so ein Block sitzt in unserer style.css und stellt das NEU-Geblinke ab. Mehr dazu im Kapitel Animationen. Mit print als Medientyp lassen sich übrigens auch Druckversionen stylen, Navigation raus, Tinte gespartt.

Typische Fehler

Den viewport-Meta-Tag vergessen. Ohne ihn tut das Handy so als wäre es ein Desktop und keine Query greift wie erwartet.
Für jedes Gerät der Welt einen eigenen Breakpoint pflegen.
Queries nur zum Verstecken benutzen ("mobil blenden wir das halt aus"). Wer die Hälfte ausblendet, hat meist ein Strukturproblem, kein Platzproblem.

Weiter im Lernpfad: Responsive Design · Verwandt: Flexbox