CSS Media Queries: responsive Layouts steuern

Eine Media Query stellt einer Gruppe von CSS-Regeln eine Bedingung voran. Die Regeln gelten nur, wenn die Bedingung zutrifft, etwa @media (min-width: 48em) für Fenster ab 768 Pixeln Breite. Neben der Fenstergröße lassen sich der Medientyp und Einstellungen des Betriebssystems abfragen.

Media Queries sind das Werkzeug, mit dem ein Layout auf seine Umgebung reagiert. Sie fragen den Zustand ab, in dem die Seite gerade dargestellt wird: die Breite des Fensters, das Ausgabemedium, das gewünschte Farbschema, die Bereitschaft für Bewegung.

Ein HTML-Dokument ohne Stylesheet ist von sich aus anpassungsfähig. Block-Elemente nehmen die verfügbare Breite ein und ihr Text wechselt in die nächste Zeile, sobald der Platz endet. Erst feste Breiten, mehrspaltige Raster und Positionierungen nehmen dem Dokument diese Eigenschaft. Media Queries geben sie zurück.

Diese Seite gehört zur CSS-Referenz für zugängliche Websites. Sie zeigt den Aufbau der Regel, die Wahl der Breakpoints, die Abfragen für Systemeinstellungen und die Grenze von 320 CSS-Pixeln, an der die WCAG das Ergebnis misst. Stand September 2026 arbeiten alle aktuellen Browser nach Media Queries Level 4 und beherrschen die Bereichs-Schreibweise.

Das Wichtigste in Kürze

• Eine Media Query besteht aus einem optionalen Medientyp und einem Merkmal in Klammern, etwa @media screen and (min-width: 48em).
• min-width baut von klein nach groß auf. Diese Reihenfolge heißt Mobile First und kommt mit weniger Regeln aus als eine Kette aus max-width.
• Breakpoints in em folgen der Schriftgröße des Browsers. In einer Media Query entspricht 1em immer der Grundschriftgröße, unabhängig von jeder Angabe im Stylesheet.
• Zoom verändert die Breite des Viewports in CSS-Pixeln. Bei 400 Prozent Zoom auf einem 1280 Pixel breiten Fenster greifen die Regeln für 320 Pixel.
• 1.4.10 Reflow verlangt genau dort ein lesbares Ergebnis: bei 320 CSS-Pixeln Breite ohne waagerechtes Scrollen.
• Container Queries lösen Media Queries für Komponenten ab. @container fragt die Breite des umgebenden Containers ab statt die des Fensters.

Aufbau einer @media-Regel

Eine Media Query beginnt mit @media, gefolgt von einem Medientyp, einem Merkmal in Klammern oder einer Kombination aus beidem.

/* Nur das Merkmal: der häufigste Fall */
@media (min-width: 48em) {
  .layout { grid-template-columns: 2fr 1fr; }
}

/* Medientyp und Merkmal, verknüpft mit and */
@media screen and (min-width: 48em) { … }

/* Zwei Bedingungen mit Komma: eine davon genügt */
@media (orientation: landscape), (min-width: 64em) { … }

/* Verneinung: gilt, wenn die Bedingung nicht zutrifft */
@media not all and (hover: hover) { … }

Das Komma wirkt als Oder, and als Und. Die Verneinung mit not bezieht sich auf die gesamte Abfrage und benötigt in der alten Schreibweise einen Medientyp. Level 4 erlaubt zusätzlich @media not (hover: hover) für einzelne Merkmale.

Seit CSS-Verschachtelung in allen Browsern arbeitet, gehört die Abfrage direkt in die Regel, zu der sie gehört:

.karte {
  padding: 1rem;

  @media (width >= 48em) {
    padding: 2rem;
  }
}

Das hält die Ausnahme bei der Grundregel. Bei der Fehlersuche entfällt damit das Springen zwischen dem Anfang und dem Ende der Datei.

Mobile First: von klein nach groß

Zwei Richtungen sind möglich. min-width beginnt beim schmalen Fenster und ergänzt nach oben. max-width beginnt beim breiten Fenster und nimmt nach unten zurück.

/* Mobile First: die Grundregeln gelten für alle, der Rest kommt dazu */
.artikel { display: grid; gap: 1.5rem; }

@media (width >= 48em) {
  .artikel { grid-template-columns: 2fr 1fr; }
}

@media (width >= 72em) {
  .artikel { grid-template-columns: 3fr 1fr; gap: 3rem; }
}

Die Richtung von klein nach groß hat zwei Vorteile. Die Grundregeln bleiben die einfachsten, sodass ein schmales Fenster die wenigste Arbeit verursacht. Und jede Regel ergänzt die vorige, statt sie zurückzunehmen. Bei gleicher Spezifität gewinnt die zuletzt notierte Regel, weshalb aufsteigende Breakpoints in der Quelltext-Reihenfolge stehen müssen.

Breakpoints am Inhalt statt am Gerät

Breakpoint-Listen mit Gerätenamen halte ich für überholt. Die Bildschirmgrößen von Smartphones, Tablets und Notebooks überschneiden sich seit Jahren, und ein Browserfenster auf dem Schreibtisch ist selten so breit wie der Bildschirm. Der brauchbare Weg führt über den Inhalt: Du verkleinerst das Fenster langsam und setzt dort einen Breakpoint, wo das Layout unangenehm wird.

Für die Einheit gibt es eine klare Empfehlung.

In einer Media Query bezieht sich em immer auf die Grundschriftgröße des Browsers. Eine Angabe wie html { font-size: 20px } ändert daran nichts. Genau das macht die Einheit nützlich: Wer die Schrift im Browser auf 24 Pixel stellt, bekommt den zweispaltigen Aufbau erst bei einem entsprechend breiteren Fenster, denn bei 24 Pixeln Grundschrift entspricht 48em einer Breite von 1152 Pixeln.

/* 48em entspricht 768px bei Standardschriftgröße und wächst mit ihr mit */
@media (width >= 48em) { … }

Die Bereichs-Schreibweise

Media Queries Level 4 erlaubt Vergleichsoperatoren. Sie lesen sich wie eine Ungleichung und ersparen das Nachdenken über min und max.

@media (width >= 48em) { … }              /* statt (min-width: 48em) */
@media (width < 48em) { … }               /* statt (max-width: 47.9375em) */
@media (48em <= width <= 64em) { … }      /* ein Bereich in einer Zeile */

Der zweite Fall zeigt den eigentlichen Gewinn. max-width: 48em schließt die Breite von genau 48em mit ein, sodass sich zwei Abfragen an der Kante überschneiden. Wer beide Ränder sauber trennen will, rechnet in der alten Schreibweise mit 47.9375em. Mit < entfällt diese Rechnerei.

Ohne Media Query auskommen

Viele Anpassungen benötigen heute keine Abfrage mehr. Drei Muster decken den größten Teil ab und passen sich stufenlos an, statt an einer Kante zu springen.

/* Raster ohne Breakpoint: so viele Spalten wie passen */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

/* Größen, die mitwachsen */
h1 { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); }

/* Eine Reihe, die selbst umbricht */
.leiste { display: flex; flex-wrap: wrap; gap: 1rem; }

Die Einzelheiten dazu stehen unter Grid und Flexbox. Eine Media Query lohnt sich dort, wo sich die Anordnung grundsätzlich ändert, etwa wenn aus einer waagerechten Navigation ein Aufklappmenü wird.

Container Queries für Komponenten

Eine Media Query kennt nur das Fenster. Eine Karte weiß damit nicht, ob sie in einer breiten Spalte oder in einer schmalen Seitenleiste steht. Container Queries lösen das.

.seitenleiste, .hauptbereich {
  container-type: inline-size;
}

.karte { display: grid; gap: 0.5rem; }

@container (width >= 24em) {
  .karte { grid-template-columns: 8rem 1fr; }
}

Der Container meldet seine eigene Breite. Dieselbe Karte erscheint in der Seitenleiste untereinander und im Hauptbereich nebeneinander, ohne dass eine Regel das Fenster kennt. Dazu kommen die Einheiten cqi und cqb, die sich auf die Inline- und die Block-Größe des Containers beziehen.

Stand September 2026 arbeiten Container Queries in allen aktuellen Browsern. Für neue Komponenten sind sie die passendere Abfrage. Media Queries bleiben für das Seitenraster und für alles zuständig, was das Gerät betrifft.

Systemeinstellungen abfragen

Der zweite große Zweig der Merkmale hat mit Größen nichts zu tun. Diese Abfragen lesen Einstellungen aus dem Betriebssystem.

/* Bewegung nur, wenn niemand widerspricht */
@media (prefers-reduced-motion: no-preference) {
  .karte { transition: transform 200ms; }
}

/* Dunkles Schema aus der Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root { --grund: #111214; --text: #f2f2f3; }
}

/* Größere Zielflächen für grobe Eingabegeräte */
@media (any-pointer: coarse) {
  .icon-button { min-block-size: 44px; min-inline-size: 44px; }
}

Bei hover und pointer zählt der Unterschied zwischen der Form mit und ohne any. Ein Notebook mit Touchscreen meldet bei pointer das genaue Zeigegerät und bei any-pointer zusätzlich den Finger. Für Zielgrößen ist deshalb any-pointer: coarse die richtige Abfrage.

Medientypen: screen und print

Von den früheren Medientypen sind drei übrig: all, screen und print. Ein Druck-Layout entsteht mit wenigen Zeilen und ist einer der Fälle, in denen sich der Aufwand bemerkbar macht.

@media print {
  nav, .cookie-banner, .seitenleiste { display: none; }

  body { font-size: 11pt; color: #000; background: #fff; }

  a[href^="http"]::after { content: " (" attr(href) ")"; } /* Ziel sichtbar machen */

  h2, h3 { break-after: avoid; }  /* keine Überschrift am Seitenende */
}

Drei verbreitete Irrtümer

Ein media-Attribut am <link> verhindert den Download nicht. Der Browser lädt jedes verlinkte Stylesheet herunter, auch wenn die Abfrage nicht zutrifft. Er stellt dafür das Rendern nicht zurück und lädt die Datei mit niedriger Priorität. Als Ladeoptimierung taugt die Aufteilung wenig, als Trennung nach Aufgabe bleibt sie sinnvoll.

only screen ist eine Altlast. Das Schlüsselwort verbarg Media Queries vor Browsern, die sie nicht kannten. Diese Browser gibt es nicht mehr.

Feste Gerätelisten veralten. Eine Abfrage nach device-width bezieht sich auf den Bildschirm statt auf das Fenster und war selbst zu ihrer Zeit die falsche Wahl. Sie gilt als missbilligt.

Barrierefreiheit: worauf es ankommt

Zoom löst dieselben Breakpoints aus wie ein kleines Fenster

Beim Vergrößern der Seite bleibt die Anzahl der Geräte-Pixel gleich, während jeder CSS-Pixel mehr Platz belegt. Der Viewport wird dadurch in CSS-Pixeln schmaler. Ein Fenster von 1280 Pixeln Breite bei 400 Prozent Zoom entspricht 320 CSS-Pixeln.

Genau diese Zahl steht in 1.4.10 Reflow. Der Inhalt muss bei 320 CSS-Pixeln Breite ohne waagerechtes Scrollen lesbar bleiben. Wer sein Layout an dieser Grenze prüft, prüft damit zugleich die Vergrößerung auf 400 Prozent. Ausgenommen sind Elemente, die zwei Dimensionen benötigen, etwa Datentabellen und Karten.

/* Prüfpunkt: bei 320 CSS-Pixeln darf nichts waagerecht überstehen */
@media (width <= 20em) {
  .tabelle-scroll { overflow-x: auto; } /* die erlaubte Ausnahme */
}

Den vollständigen Testweg beschreibt Reflow, Zoom und Textabstände.

Das viewport-Meta-Element darf den Zoom nicht sperren

Ohne <meta name="viewport"> rendert ein mobiler Browser die Seite in einem gedachten Fenster von rund 980 Pixeln und verkleinert das Ergebnis. Die Media Queries für schmale Fenster greifen dann nie.

<!-- Do -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Don't: sperrt das Aufziehen mit zwei Fingern -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

user-scalable=no und ein niedriges maximum-scale nehmen die Vergrößerung und verstoßen gegen 1.4.4 Textgröße ändern. iOS-Safari ignoriert die Angabe seit Jahren. Android-Browser halten sich daran, solange Nutzende das Erzwingen des Zooms nicht selbst eingeschaltet haben. Der Rest der Angaben gehört zu den Dokument-Metadaten.

display: none entfernt Inhalt für alle

Ein Element, das in einer Media Query ausgeblendet wird, verschwindet aus dem Barrierefreiheits-Baum. Screenreader lesen es nicht mehr vor, und die Tastatur erreicht es nicht. Das ist bei Dekoration erwünscht. Bei Inhalt entsteht daraus ein Verstoß gegen 1.3.1 Info und Beziehungen, weil in der schmalen Ansicht Information fehlt.

Der zweite Fall ist die doppelte Navigation. Viele Vorlagen legen ein Menü für breite und eines für schmale Fenster an und blenden jeweils eines aus. Beide stehen im Dokument, beide werden gepflegt, und bei einem Fehler in der Abfrage liest ein Screenreader beide vor. Eine einzige Navigation, die ihre Darstellung ändert, ist der ruhigere Weg. Wie ein solches Menü aussieht, zeigt Menüs und Dropdowns.

Keine Funktion allein hinter dem Hover-Zustand

@media (hover: hover) beschreibt das Zeigegerät und sagt nichts über die Person davor. Wer einen Touchscreen mit Tastatur bedient, bekommt die Hover-Variante nie zu sehen. Inhalte, die erst beim Überfahren erscheinen, benötigen deshalb einen zweiten Weg über Fokus oder Klick. Die Bedingungen dafür stehen in 1.4.13 Inhalt bei Hover oder Fokus.

Keine Sperre auf eine Ausrichtung

@media (orientation: portrait) darf die Darstellung anpassen. Eine Seite, die im Querformat eine Aufforderung zum Drehen zeigt und den Inhalt verbirgt, verstößt gegen 1.3.4 Ausrichtung. Für Menschen mit einem fest montierten Gerät am Rollstuhl ist das Drehen keine Option.

Systemeinstellungen respektieren

Drei Abfragen gehören in jedes Stylesheet. prefers-reduced-motion schaltet Bewegung ab, was 2.2.2 Pausieren, Beenden, Ausblenden verlangt und unter CSS-Animationen im Detail steht. forced-colors erkennt den Kontrastmodus von Windows, in dem der Browser Farben ersetzt. prefers-contrast erlaubt eine kräftigere Variante des eigenen Schemas.

@media (forced-colors: active) {
  .karte { border: 1px solid CanvasText; } /* Systemfarbe statt eigener Farbe */
  .icon  { forced-color-adjust: auto; }
}

Im Kontrastmodus ersetzt das System alle Farben. Flächen, die ihre Bedeutung allein aus einer Hintergrundfarbe beziehen, verlieren sie dabei. Ein Rahmen in einer Systemfarbe wie CanvasText hält die Begrenzung sichtbar. Die Grundlagen zu Farbe und Kontrast stehen unter Farbkontraste.

Häufige Fragen

Was ist eine Media Query in CSS?

Eine Media Query ist eine Bedingung vor einer Gruppe von CSS-Regeln. Trifft sie zu, wendet der Browser die Regeln an. Abgefragt werden der Medientyp wie print, Merkmale des Viewports wie seine Breite und Einstellungen des Betriebssystems wie das bevorzugte Farbschema. Die Regel beginnt mit @media.

Welche Breakpoints soll ich verwenden?

Keine feste Liste. Verkleinere das Fenster und setze einen Breakpoint dort, wo das Layout unangenehm wird. Als Ausgangspunkt haben sich drei Stufen bewährt: rund 48em für zwei Spalten, rund 64em für den vollen Aufbau und rund 90em als Begrenzung der Textbreite. Die Einheit em ist dabei px vorzuziehen, weil sie der Schriftgröße im Browser folgt.

min-width oder max-width?

min-width in aufsteigender Reihenfolge. Die Grundregeln gelten dann für das schmale Fenster, und jede Abfrage ergänzt etwas für mehr Platz. Mit max-width entsteht eine Kette aus Rücknahmen, die bei jedem neuen Element gepflegt werden muss. In der modernen Schreibweise heißen die beiden (width >= …) und (width < …).

Wann sind Container Queries besser als Media Queries?

Immer dann, wenn eine Komponente an verschiedenen Stellen in unterschiedlicher Breite steht. Eine Karte in der Seitenleiste und dieselbe Karte im Hauptbereich benötigen unterschiedliche Anordnungen, und das Fenster sagt darüber nichts aus. Für das Seitenraster und für Abfragen zum Gerät bleibt @media zuständig.

Wie teste ich, ob mein Layout bei 320 Pixeln funktioniert?

Stelle das Browserfenster auf 1280 Pixel Breite und zoome auf 400 Prozent. Das entspricht 320 CSS-Pixeln. Danach prüfst du, ob eine waagerechte Bildlaufleiste erscheint, ob Text abgeschnitten wird und ob alle Bedienelemente erreichbar bleiben. Die Geräteansicht der Entwicklerwerkzeuge ist eine Näherung und ersetzt den Zoomtest nicht.

Verwandte Themen

• CSS-Referenz im Überblick ordnet die Eigenschaften für zugängliche Websites ein.
• Grid und Flexbox zeigen Raster, die ohne Breakpoint auskommen.
• CSS-Animationen behandelt prefers-reduced-motion im Detail.
• overflow erklärt, woher waagerechtes Scrollen bei 320 Pixeln kommt.
• Reflow, Zoom und Textabstände enthält den vollständigen Prüfweg.

Quellen

• Media Queries Level 4: Syntax, Bereichs-Schreibweise und die Liste der Merkmale (W3C)
• Understanding SC 1.4.10: Reflow: Herleitung der 320 CSS-Pixel (W3C WAI)
• CSS Containment Module Level 3: Container Queries und die Container-Einheiten (W3C)