Sie sitzen im Zug. Das Netz ruckelt, egal. Sie wollen nur schnell die Speisekarte vom Lokal um die Ecke sehen. Sie tippen, die Seite lädt, und dann: Buchstaben in Ameisengröße, Buttons, die sich überlappen, ein Bild, das über den Rand kippt. Sie zoomen, ziehen, fluchen leise. Drei Sekunden später sind Sie beim nächsten Lokal.

So fühlt sich eine Seite ohne Media Queries an.

Und jetzt das Gegenstück. Dieselbe Speisekarte, aber sie passt. Lesbar. Daumengerecht. Als hätte jemand gewusst, dass Sie gerade ein kleines Display in der Hand halten und keine Lust auf Fingerakrobatik haben.

Eine Frage gleich zu Beginn: Wie oft haben Sie eine Seite verlassen, nur weil sie sich auf Ihrem Gerät falsch anfühlte? Vermutlich öfter, als Sie denken. Und Ihre Besucher tun dasselbe.

Media Queries passen das Layout einer Website an Bildschirmgröße, Gerät und Nutzungssituation an.

Was Media Queries sind

Media Queries sind die Regeln, mit denen eine Webseite herausfindet, wer gerade zuschaut und worauf. Sie gehören zu CSS, der Sprache, die das Aussehen einer Seite bestimmt. Eine Media Query stellt eine Bedingung: Ist der Bildschirm schmaler als 768 Pixel? Dann gelten diese Gestaltungsregeln. Sonst jene.

Stellen Sie sich einen Schneider vor. Nicht den, der von der Stange verkauft. Den anderen. Er legt das Maßband an, bevor die Schere das erste Mal ansetzt. Schulterbreite. Armlänge. Wo die Naht sitzen muss. Derselbe Stoff, dieselbe Handschrift, aber der Schnitt folgt dem Körper, der vor ihm steht.

Media Queries sind das Maßband im Code. Die Webseite ist der Stoff. Das Gerät ist der Körper. Und überall dort, wo der Schneider zur Stecknadel greift, steht im Stylesheet ein @media.

Dieses Prinzip ist das Herzstück des sogenannten Responsive Webdesigns: eine einzige Seite, die sich auf Smartphone, Tablet und Desktop jeweils anders zeigt, ohne dass Sie für jedes Gerät eine eigene Version pflegen müssen.

Warum sie über Bleiben oder Gehen entscheiden

Das Original-Wissen lautet meist: „Webseiten müssen auf allen Geräten konsistent aussehen.“ Stimmt. Klingt aber nach Pflicht. Nach Häkchen auf einer Liste.

Die ehrlichere Version: Der Großteil Ihrer Besucher kommt heute über das Handy. Ein Bildschirm, kaum größer als eine Postkarte, gehalten mit einer Hand, oft im Vorbeigehen. Wer dort scheitert, hat nicht „eine schlechtere Darstellung“. Er hat den Besucher verloren.

Es geht also nicht um Schönheit. Es geht um die ersten Sekunden. In diesen Sekunden entscheidet jemand, ob er bleibt oder weiterwischt, und er entscheidet es mit dem Bauch, lange bevor der Kopf nachdenkt. Eine Seite, die sich fügt, sagt leise: Hier hat jemand an dich gedacht. Eine Seite, die zwingt zu zoomen, sagt das Gegenteil.

Suchmaschinen haben diese Logik längst übernommen. Sie bewerten Seiten zuerst in der mobilen Ansicht. Wer mobil patzt, rutscht im Ranking. Media Queries sind damit nicht nur eine Frage der Gestaltung, sondern eine Frage der Sichtbarkeit.

Wie eine Media Query aufgebaut ist

Eine Media Query besteht aus zwei Teilen: einem Medientyp (für welche Art von Gerät) und einer oder mehreren Medienbedingungen (unter welchen Eigenschaften).

@media screen and (max-width: 768px) {
  /* Diese Regeln greifen nur auf Bildschirmen
     bis 768 Pixel Breite, also etwa auf Smartphones. */
}

Übersetzt heißt das: „Wenn es ein Bildschirm ist und dieser höchstens 768 Pixel breit ist, dann mach Folgendes.“ Erst wenn beide Bedingungen erfüllt sind, greift der Schneider zur Nadel.

Die Bedingungen lassen sich kombinieren, verschachteln, mit not verneinen, mit Komma verodern. Wer es genau wissen will, findet die vollständige Logik in der MDN-Dokumentation zu Media Queries. Für den Anfang reicht der eine Satz oben. Bedingung rein, Regeln folgen.

Was sich damit steuern lässt

Die Standardantwort liest sich wie ein Werkzeugkatalog: Layout anpassen, Schriftgrößen ändern, Elemente ein- und ausblenden. Alles richtig, aber das ist die Aufzählung. Interessant wird es bei der Frage, wofür.

Auf dem schmalen Display klappt das dreispaltige Raster in eine einzige Spalte. Die Navigation verschwindet hinter einem Symbol, weil zehn Menüpunkte nebeneinander schlicht keinen Platz haben. Die Schrift wächst ein, zwei Stufen, damit niemand die Augen zusammenkneifen muss. Das ist kein kosmetisches Spiel. Das ist die Entscheidung, was im kleinen Rahmen wichtig genug ist, um sichtbar zu bleiben.

Ein Punkt verdient eine Korrektur, weil er oft falsch erzählt wird. Man liest gern, Media Queries würden „nur die nötigen Ressourcen laden“ und so die Ladezeit verbessern. So einfach ist es nicht. CSS-Regeln in nicht zutreffenden Media Queries lädt der Browser in der Regel trotzdem herunter, nur mit niedrigerer Priorität. Echte Ladevorteile entstehen erst, wenn Sie die Bedingung an die richtige Stelle setzen: an das media-Attribut beim Einbinden von Stylesheets oder an responsive Bilder, die je nach Bildschirm eine kleinere oder größere Datei ausliefern. Media Queries können die Performance verbessern. Von allein tun sie es nicht.

Medientypen und Medienmerkmale

Hier ist eine Liste am Platz, weil die Dinge wirklich gleichberechtigt nebeneinanderstehen.

Bei den Medientypen ist die Auswahl heute angenehm überschaubar:

• screen für alles mit Bildschirm, vom Smartphone bis zum großen Monitor.
• print für die Druckansicht, wenn jemand Ihre Seite auf Papier bringt.
• all für alle Ausgabearten gleichzeitig.

Die alte Sammlung exotischer Typen für Fernseher, Beamer oder Handhelds wurde aus dem Standard entfernt. Wer sie noch im Code findet, kann sie streichen.

Spannender sind die Medienmerkmale, die eigentlichen Bedingungen:

• width, min-width, max-width: die Breite des Anzeigefensters, das mit Abstand meistgenutzte Merkmal.
• orientation: Hoch- oder Querformat, wichtig beim Drehen des Handys.
• resolution: die Pixeldichte, relevant für gestochen scharfe Darstellung auf hochauflösenden Displays.
• aspect-ratio: das Seitenverhältnis des Fensters.

Und dann gibt es eine jüngere, oft übersehene Familie: Merkmale, die nicht das Gerät abfragen, sondern den Menschen davor. prefers-color-scheme erkennt, ob jemand seinen Dark Mode aktiviert hat, und passt die Farben an. prefers-reduced-motion erkennt, ob jemand Animationen reduzieren möchte, etwa weil sie ihm Unwohlsein bereiten. Das ist der Moment, in dem aus „passt aufs Gerät“ ein „passt zum Wunsch“ wird. Der Schneider fragt nicht mehr nur nach dem Körper. Er fragt nach dem Geschmack.

Mobile First: vom schmalsten Schnitt aus denken

Die wirkungsvollste Gewohnheit beim Arbeiten mit Media Queries heißt Mobile First. Sie beginnen mit dem Entwurf für den kleinsten Bildschirm und erweitern erst danach für die größeren.

Zurück zum Schneider. Würde er mit dem weitesten Mantel beginnen und ihn dann mühsam für ein Kind enger stecken? Niemals. Er beginnt mit dem schmalsten sauberen Schnitt und gibt Stoff dazu, wo Platz ist. Genau diese Reihenfolge meint Mobile First.

/* Grundregel für kleine Geräte */
body {
  font-size: 16px;
}

/* Mehr Raum auf größeren Bildschirmen */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Zwei praktische Feinheiten machen den Unterschied zwischen sauber und schludrig.

Erstens: Verwenden Sie für Ihre Breakpoints am besten em statt px. Der Grund ist nicht Geschmack, sondern Rücksicht. In Media Queries rechnen em-Werte gegen die voreingestellte Schriftgröße des Browsers. Wer also seine Schrift größer gestellt hat, weil er sonst schlecht liest, dessen Layout reagiert dann mit. Eine kleine Entscheidung im Code, eine große für den Menschen, der sonst übersehen wird.

Zweitens: Es gibt inzwischen eine klarere Schreibweise, die sogenannte Range-Syntax. Statt min-width und max-width mühsam zu kombinieren, schreiben Sie einfach mit Vergleichszeichen:

@media (768px <= width <= 1024px) {
  /* gilt für Fenster zwischen 768 und 1024 Pixeln */
}

Lesbarer, kürzer, weniger fehleranfällig. Moderne Browser verstehen sie zuverlässig.

Wo es haken kann

Kein Werkzeug ohne Tücken. Wer ehrlich bleibt, nennt sie.

Media Queries wachsen. Erst sind es drei, dann zwölf, dann ein Dickicht aus Sonderfällen, die sich gegenseitig überschreiben. Irgendwann traut sich niemand mehr, eine Zeile zu ändern, aus Angst, an anderer Stelle etwas zu zerbrechen. Die Lösung ist keine neue Technik, sondern Disziplin: wenige, klar benannte Breakpoints und ein Stylesheet, das ein Mensch noch lesen kann.

Dazu kommt die unbequeme Wahrheit über die Geräte. Es gibt nicht „das Handy“ und „den Desktop“. Es gibt unendlich viele Größen dazwischen, und morgen kommt eine neue. Sie werden nie jeden Fall perfekt treffen. Das Ziel ist deshalb nicht Kontrolle über jedes Gerät, sondern eine Gestaltung, die biegsam genug ist, um sich überall halbwegs würdevoll zu verhalten. Flexibilität schlägt Vollständigkeit.

Was nach den Media Queries kam

Viele Texte stellen Container Queries als „Zukunftsmusik“ vor. Das stimmt nicht mehr. Container Queries sind seit 2023 in allen großen Browsern angekommen und gelten seit 2025 als breit nutzbar. Sie gehören in die Gegenwart, nicht in den Ausblick. Den aktuellen Stand können Sie jederzeit auf caniuse.com prüfen.

Der Unterschied ist fein, aber er verändert die Denkweise. Eine Media Query fragt: Wie groß ist das Fenster? Eine Container Query fragt: Wie groß ist der Behälter, in dem ich gerade stecke? Eine Produktkachel weiß damit selbst, ob sie in einer breiten Spalte oder in einer schmalen Seitenleiste sitzt, und ordnet sich entsprechend. Sie schaut nicht mehr auf den ganzen Raum, sondern auf den Platz an ihrem eigenen Tisch.

Media Queries verschwinden deshalb nicht. Für das große Ganze, das Grundgerüst der Seite, bleiben sie das richtige Werkzeug. Container Queries kommen für die einzelnen Bauteile dazu. Maßband für den Anzug, Maßband für die Knopflöcher.

Der letzte Gedanke

Am Ende geht es bei Media Queries um eine Haltung, die wenig mit Code zu tun hat. Sie heißt: Empfange den Besucher so, wie er kommt. Nicht so, wie es Ihnen am Reißbrett am bequemsten war.

Der gute Schneider fragt nicht, warum der Kunde nicht die Standardgröße hat. Er greift zum Maßband.

Welche Stelle Ihrer Seite zwingt den Besucher gerade noch, sich zu verbiegen, damit sie passt? Genau dort wartet die nächste Media Query.