Media Queries

Media Queries sind CSS-Regeln, die einen Block von Gestaltungsanweisungen an eine Bedingung knüpfen und ihn nur anwenden, wenn diese Bedingung zutrifft. Die häufigste Bedingung ist eine Mindest- oder Höchstbreite des Viewports. Die Breite, ab der eine Media Query greift, heißt Breakpoint. Abgefragt wird dabei immer der Viewport, während Container Queries dieselbe Art Frage an das umgebende Element stellen.

Media Queries

CSS-Regel, die Gestaltungsanweisungen nur dann anwendet, wenn der Browser bestimmte Bedingungen wie eine Mindestbreite erfüllt.
Beispiel: „Die zweite Spalte erscheint erst ab 900 Pixeln, gesteuert über Media Queries.“

Auch: Medienabfrage. Der Singular Media Query meint die einzelne Abfrage, der Plural wird im Alltag auch für die Technik insgesamt benutzt.

Gegenbegriff: Container Queries prüfen die Breite des umgebenden Elements. Damit richtet sich eine Kachel nach der Spalte, in der sie steht, auch wenn das Fenster viel breiter ist. Sie gelten seit August 2025 in allen großen Browsern als breit verfügbar.

So liest du Media Queries

Eine Media Query beginnt mit @media, dahinter steht die Bedingung in runden Klammern und darauf der Regelblock in geschweiften Klammern. Der Browser wertet die Bedingung bei jeder Änderung des Viewports neu aus und schaltet die Regeln an oder ab.

/* Ab 768 Pixeln Viewport-Breite bekommt das Kartenraster zwei Spalten */
@media (min-width: 768px) {
  .karten {
    grid-template-columns: 1fr 1fr;
  }
}

Alles außerhalb des Blocks gilt unverändert weiter. Eine Media Query ergänzt also nur einzelne Eigenschaften und überschreibt sie.

min-width und max-width beschreiben zwei Richtungen

min-width bedeutet „ab dieser Breite“ und setzt auf einem schmalen Grundlayout auf, wie es Mobile-First vorsieht. max-width bedeutet „bis zu dieser Breite“ und geht vom breiten Layout aus, also vom Desktop-First-Ansatz. Wer beide Richtungen im selben Projekt mischt, bekommt Regeln, die sich an den Rändern überschneiden und gegenseitig aufheben. Wir arbeiten durchgehend mit min-width.

Die Breite ist nur eines von vielen Merkmalen

Media Queries können deutlich mehr abfragen. prefers-color-scheme meldet, ob im Betriebssystem der dunkle Modus aktiv ist, und steht seit 2022 in allen großen Browsern bereit. prefers-reduced-motion signalisiert, dass jemand Bewegung im Interface zurückgefahren haben möchte. Mit orientation prüfst du Hoch- oder Querformat, mit einer print-Abfrage baust du ein eigenes Layout für den Ausdruck, und pointer verrät, ob mit Maus oder Finger bedient wird.

Die neue Schreibweise mit Vergleichszeichen

Seit 2023 unterstützen alle großen Browser eine Schreibweise, die ohne min- und max- auskommt und stattdessen Vergleichszeichen benutzt. Sie liest sich wie eine Rechnung und erspart den Umweg über Werte wie 47.999 Pixel, mit denen man früher Überschneidungen an der Grenze verhindert hat.

/* die gewohnte Schreibweise */
@media (min-width: 48rem) and (max-width: 63.999rem) { … }

/* dasselbe mit Vergleichszeichen */
@media (48rem <= width < 64rem) { … }

Beide Fassungen funktionieren nebeneinander; die ältere bleibt gültig und ist in Bestandsprojekten der Normalfall. Für neue Arbeiten ist die kürzere lesbarer, besonders bei Bereichen mit zwei Grenzen.

Wann Container Queries die bessere Wahl sind

Sobald eine Komponente an mehreren Stellen in verschiedener Breite steht. Media Queries fragen das Fenster, Container Queries den umgebenden Behälter: Dieselbe Teaserkachel kann damit in der schmalen Seitenspalte einspaltig und im breiten Hauptbereich zweispaltig erscheinen, ohne dass das Fenster eine Rolle spielt.

.spalte { container-type: inline-size; }

/* greift, wenn die Spalte breit genug ist, nicht das Fenster */
@container (min-width: 30rem) {
  .kachel { display: grid; grid-template-columns: 8rem 1fr; }
}

Unsere Faustregel: Das Seitenraster und alles, was mit dem Gerät zu tun hat, bleibt bei Media Queries. Einzelne Bausteine, die wiederverwendet werden, bekommen Container Queries. Browserunterstützung gibt es dafür seit Februar 2023 durchgehend.

Die Abfragen, die nicht die Größe meinen

Drei davon gehören in jedes Projekt. prefers-color-scheme nimmt die Systemeinstellung für den Dark Mode auf. prefers-reduced-motion fragt, ob jemand Animationen abbestellt hat, und das ist eine Frage der Barrierefreiheit und nicht des Geschmacks. hover und pointer unterscheiden, ob überhaupt mit einem Zeiger gearbeitet wird.

/* Wer Bewegung abbestellt hat, bekommt den Zustand ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Aufklappmenüs beim Überfahren nur dort, wo es einen Zeiger gibt. */
@media (hover: hover) and (pointer: fine) {
  .menue:hover .untermenue { display: block; }
}

Die letzte Abfrage löst ein altes Problem: Ein Menü, das sich beim Überfahren öffnet, braucht am Telefon zwei Berührungen, weil die erste nur den Überfahren-Zustand auslöst. Mit der Bedingung bleibt es dort einfach zu.

Was eine CSS Media Query abfragt

Eine CSS Media Query fragt Eigenschaften der Umgebung ab, in der eine Seite dargestellt wird: den Medientyp, also Bildschirm oder Druck, und einzelne Merkmale wie die Breite oder das Farbschema. Trifft die Bedingung zu, gelten die Regeln im Block, sonst überspringt der Browser ihn.

Medientypen gibt es seit Media Queries Level 4 nur noch drei: all für alles, print für den Druck samt Druckvorschau und screen für alles Übrige. Ältere Typen wie tv oder handheld erkennt der Browser weiterhin als gültig, lässt sie aber auf nichts mehr zutreffen. Wie ein Layout für Papier aussieht, zeigt der Eintrag Print-Stylesheet.

Wie sich Bedingungen in Media Queries verbinden

Mehrere Bedingungen verbinden sich über eine Handvoll Schlüsselwörter. Die Tabelle zeigt alle, die im Alltag vorkommen.

Schreibweise	Bedeutung	Beispiel
and	beide Bedingungen müssen zutreffen	screen and (min-width: 48rem)
Komma	eine der Abfragen genügt	print, (max-width: 30rem)
or	eine der Bedingungen genügt, innerhalb einer Abfrage	(hover: none) or (pointer: coarse)
not	kehrt eine ganze Abfrage oder ein einzelnes Merkmal um	not print
only	versteckt die Abfrage vor sehr alten Browsern und ändert sonst nichts	only screen and (color)

Im Alltag reichen and und das Komma. Wer or mit and kombiniert, setzt Klammern um die Teile, weil beide laut MDN auf derselben Ebene unzulässig sind. Und only stammt aus der Zeit, als Browser nur Medientypen kannten; auf heutige Browser wirkt es nicht.

Media Queries in HTML und JavaScript

Media Queries stehen auch außerhalb von CSS. Im HTML entscheidet das Attribut media an einem <link>, ob ein Stylesheet gilt, und an einem <source> im picture-Element, welches Bild der Browser lädt:

<!-- Stylesheet nur für den Druck -->
<link rel="stylesheet" href="druck.css" media="print">

<!-- das breite Motiv erst ab 64rem, sonst das schmale -->
<picture>
  <source media="(min-width: 64rem)" srcset="motiv-breit.jpg">
  <img src="motiv-schmal.jpg" alt="Blick in die Werkstatt">
</picture>

In JavaScript wertet window.matchMedia() dieselbe Abfrage aus und meldet über das Ereignis change, wenn sich das Ergebnis ändert:

const breit = window.matchMedia('(min-width: 64rem)');

function umschalten(abfrage) {
  document.body.classList.toggle('ist-breit', abfrage.matches);
}

umschalten(breit);                             // beim Laden
breit.addEventListener('change', umschalten);  // bei jeder Änderung

Der Weg über JavaScript lohnt sich, wo ein Skript tatsächlich etwas anderes tun muss, etwa ein Karussell erst ab einer bestimmten Breite starten. Für die Gestaltung bleibt CSS die bessere Stelle, weil es ohne Skript und ohne Verzögerung greift.

Woher Media Queries kommen

Die Idee ist älter als das Smartphone. Schon HTML 4 kannte das Attribut media mit Medientypen wie screen und print. Laut der Publikationsgeschichte der W3C erschien der erste Arbeitsentwurf für Media Queries am 4. April 2001, zur Empfehlung wurde Media Queries Level 3 am 19. Juni 2012. Level 4 ist bis heute eine Kandidatenempfehlung, zuletzt überarbeitet im Februar 2026.

Bekannt wurden Media Queries durch einen Artikel: Am 25. Mai 2010 beschrieb Ethan Marcotte in A List Apart, wie flexible Raster, flexible Bilder und Media Queries zusammen eine Seite ergeben, die sich an jedes Gerät anpasst. Er gab dem Ansatz den Namen Responsive Web Design.

Was Media Queries nicht wissen

Media Queries kennen das Gerät nicht. Sie fragen Eigenschaften ab, etwa die Breite des Viewports oder die Art des Zeigers, und keine davon verrät, ob jemand am Telefon oder am Rechner sitzt. Die Spezifikation führt die Merkmale device-width und device-height deshalb als veraltet, auch weil sie gern als Ersatz für eine Geräteerkennung benutzt wurden.

Die zweite Grenze betrifft die Einheiten. Ein em oder rem in einer Media Query bezieht sich immer auf die Grundschrift des Browsers, also auf seine Voreinstellung oder die Wahl des Nutzers. Schriftgrößen aus dem Stylesheet spielen dafür keine Rolle. Wer html { font-size: 62.5% } setzt, verschiebt damit keinen einzigen Breakpoint. Genau das macht CSS-Einheiten wie em für Breakpoints nützlich: Stellt jemand im Browser eine größere Schrift ein, schaltet das Layout entsprechend früher um.

Pixel-Breakpoints in Media Queries auf em umstellen

Den Pixelwert durch 16 teilen, weil die Grundschrift der Browser in der Voreinstellung meist 16 Pixel beträgt. Aus 768 Pixeln werden 48em, aus 1024 Pixeln 64em. Die Media Query liefert damit bei Standardschrift dasselbe Ergebnis wie vorher und reagiert zusätzlich auf eine vergrößerte Schrift.

/* vorher */
@media (min-width: 768px) { … }

/* nachher: gleich bei 16px Grundschrift, mitwachsend bei größerer */
@media (min-width: 48em) { … }

Media Queries im Browser testen

In den Entwicklertools von Chrome. Die Geräteansicht zieht den Viewport auf jede gewünschte Breite und blendet die Breakpoints der Seite als Leiste ein. Im Bereich Rendering lassen sich außerdem Medienmerkmale vortäuschen: der Medientyp print als Druckvorschau, prefers-color-scheme für den Dunkelmodus, dazu unter anderem prefers-reduced-motion und forced-colors.

Den festen Kopfbereich im Querformat mit Media Queries lösen

Mit einer Media Query, die Querformat und geringe Höhe zusammen abfragt. Auf einem quer gehaltenen Telefon frisst ein fester Kopfbereich sonst einen großen Teil der ohnehin knappen Höhe.

@media (orientation: landscape) and (max-height: 30rem) {
  .kopf { position: static; }   /* scrollt mit der Seite */
}

Die Höhenbedingung ist der wichtige Teil. orientation: landscape trifft immer zu, wenn der Viewport breiter als hoch ist, und das gilt für fast jedes Browserfenster am Rechner.

Witziges und Kurioses rund um Media Queries

Die Spezifikation führt bis heute Medientypen für Braille-Zeilen, Prägedrucker und Fernseher, und keiner davon darf laut Level 4 noch auf irgendetwas zutreffen. Sie rechnet sogar damit, dass auch die drei verbliebenen Typen irgendwann verschwinden, sobald es passende Merkmale gibt.

Das Merkmal grid fragt, ob die Ausgabe ein Textterminal mit festem Zeichenraster ist; nach dem Stand der Spezifikation meldet jeder bekannte Browser dafür 0. Und das erste Beispiel in Marcottes Artikel von 2010 benutzt ausgerechnet max-device-width, also eines der Merkmale, die heute als veraltet gelten. Das Stylesheet dazu hieß shetland.css.