Ausführbare CSS-Docs: Media Queries

Q: Wie schreibe ich eine Media Query für den Dark Mode?

Nimm @media (prefers-color-scheme: dark) { ... }. Sie greift, wenn Betriebssystem oder Browser des Nutzers auf ein dunkles Theme eingestellt sind, und darin kannst du Farben oder CSS-Variablen überschreiben.

Eine Media Query in einem Beispiel

Eine Media Query packt CSS in eine Bedingung. Die Regeln in @media (min-width: 600px) gelten nur, solange der Viewport mindestens 600px breit ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .banner { padding: 16px; background: #f59e0b; color: #111827; }
    .banner::after { content: " (narrow: under 600px)"; }

    @media (min-width: 600px) {
      .banner { background: #2563eb; color: white; }
      .banner::after { content: " (wide: 600px or more)"; }
    }
  </style>
</head>
<body>
  <p class="banner">This box changes color at 600px</p>
  <p id="w"></p>
  <script>
    const show = () => { document.getElementById('w').textContent = 'This preview is ' + window.innerWidth + 'px wide.'; };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Die Vorschau ist ein Frame, und eine Media Query darin misst den Frame, nicht deinen Bildschirm. Auf einem Desktop ist er etwa so breit wie diese Artikelspalte, meist mehr als 600px, also ist die Box blau. Mach dein Browserfenster so schmal, dass der Frame unter 600px fällt, und sie wird bernsteinfarben; die Zeile unter der Box zeigt die Breite des Frames live an. Auf dem Handy ist der Frame schon schmal, also siehst du die bernsteinfarbene Version.

Die @media-Syntax

@media (min-width: 600px) { ... }                        /* one condition */
@media (min-width: 600px) and (max-width: 899px) { ... } /* both must be true */
@media (max-width: 599px), print { ... }                 /* either one (comma = or) */
@media not print { ... }                                 /* negation */
@media screen and (orientation: landscape) { ... }       /* media type plus a feature */
@media (width >= 600px) { ... }                          /* range syntax */
@media (600px <= width < 900px) { ... }                  /* a range with both ends */

and braucht auf beiden Seiten ein Leerzeichen: (min-width: 600px)and(max-width: 900px) ist ungültig, und die ganze Query wird ignoriert. Die Bereichssyntax (width >= 600px) wird in aktuellen Versionen von Chrome, Firefox und Safari unterstützt und liest sich klarer als min-width, besonders für „bis ausschließlich“.

Die Merkmale, die du am häufigsten brauchst:

Merkmal	Greift, wenn	Beispiel
`min-width` / `width >=`	der Viewport mindestens so breit ist	`(min-width: 768px)`
`max-width` / `width <=`	der Viewport höchstens so breit ist	`(max-width: 767px)`
`orientation`	`portrait` (höher als breit) oder `landscape`	`(orientation: landscape)`
`hover`	der Hauptzeiger hovern kann (`hover`) oder nicht (`none`, die meisten Touchscreens)	`(hover: hover)`
`pointer`	der Hauptzeiger `fine` (Maus) oder `coarse` (Finger) ist	`(pointer: coarse)`
`prefers-color-scheme`	der Nutzer ein `dark` oder `light` Theme gewählt hat	`(prefers-color-scheme: dark)`
`prefers-reduced-motion`	der Nutzer im System weniger Bewegung eingestellt hat	`(prefers-reduced-motion: reduce)`
`print` (ein Medientyp)	die Seite gedruckt oder als PDF gespeichert wird	`@media print`

Mobile First: Breakpoints mit min-width

Schreib das Handy-Layout als Basis-CSS und ergänze dann min-width-Queries, die das Layout ändern, wenn mehr Platz da ist. Jede Query muss nur beschreiben, was sich ändert:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile first</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cards div { background: #16a34a; color: white; padding: 18px; border-radius: 6px; }

    @media (min-width: 480px) {
      .cards { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 720px) {
      .cards { grid-template-columns: 1fr 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
  <p id="out"></p>
  <script>
    const show = () => {
      const n = getComputedStyle(document.querySelector('.cards')).gridTemplateColumns.split(' ').length;
      document.getElementById('out').textContent = innerWidth + 'px wide: ' + n + ' column(s)';
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

In einem breiten Desktop-Fenster ist die Vorschau über 720px breit, also siehst du drei Spalten; die Zeile unter dem Grid zeigt Breite und Spaltenanzahl an. Mach das Fenster schmaler, und unter 720px werden es zwei, unter 480px eine. Die Reihenfolge der beiden Queries ist wichtig: Auf einem breiten Bildschirm treffen beide zu, und die spätere gewinnt, also stehen min-width-Queries von der kleinsten zur größten. (Bei max-width-Queries ist es umgekehrt: die größte zuerst.)

Breakpoints wählen

Eine offizielle Liste gibt es nicht. Das sind übliche Werte und was sie meist trennen:

Breakpoint	Typischerweise
`min-width: 640px`	große Handys im Querformat, kleine Tablets
`min-width: 768px`	Tablets im Hochformat
`min-width: 1024px`	Tablets im Querformat, kleine Laptops
`min-width: 1280px`	Desktops

Eine bessere Methode: Fang mit dem schmalen Layout an, zieh das Fenster breiter, bis etwas falsch aussieht (zu lange Zeilen, zu breite Karten), und setz dort einen Breakpoint. Für die meisten Seiten reichen zwei oder drei Breakpoints. Oft brauchst du gar keinen: repeat(auto-fit, minmax(200px, 1fr)) in Grid, flex-wrap und clamp() passen sich stufenlos an.

Jede Seite braucht das Viewport-Meta-Tag

Ohne dieses Tag im <head> legen Handy-Browser die Seite so an, als wäre der Bildschirm etwa 980px breit, und zoomen dann heraus. Deine Query min-width: 480px trifft also immer zu, und dein Handy-Layout erscheint nie:

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

Die Seite zu meta viewport erklärt jeden Wert darin.

Dark Mode mit prefers-color-scheme

prefers-color-scheme folgt der Hell- oder Dunkel-Einstellung des Betriebssystems. Am saubersten nutzt du es, indem du Farben in CSS-Variablen hältst und in der Query nur die Variablen änderst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dark mode</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    @media (prefers-color-scheme: dark) {
      :root { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    }

    /* A theme toggle sets the same variables by hand */
    :root[data-theme="dark"] { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    :root[data-theme="light"] { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 12px; }
    .card { background: var(--card); padding: 16px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="card">This card follows your system setting, or the button.</div>
  <p><button id="toggle">Switch theme</button></p>
  <p id="out"></p>
  <script>
    const mq = matchMedia('(prefers-color-scheme: dark)');
    const root = document.documentElement;
    const show = () => {
      document.getElementById('out').textContent =
        'Dark mode query matches: ' + mq.matches + '. Theme: ' + (root.dataset.theme || 'system');
    };
    document.getElementById('toggle').addEventListener('click', () => {
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : mq.matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      show();
    });
    mq.addEventListener('change', show);
    show();
  </script>
</body>
</html>

In dieser Vorschau kann die Abfrage false anzeigen, obwohl dein System auf dunkel steht: Chrome gibt die Systemeinstellung nicht an einen Frame mit Sandbox wie diesen weiter. Der Button setzt dieselben Variablen von Hand, so wie der Theme-Schalter einer Website. :root[data-theme] ist spezifischer als das einfache :root in der Abfrage, also gewinnt die Wahl des Lesers gegen das System. Speichere das Beispiel als Datei und öffne es, um zu sehen, wie die Abfrage deinem System folgt.

Das Skript zeigt die zweite Hälfte von Media Queries: matchMedia() führt dieselbe Query aus JavaScript aus, gibt zurück, ob sie gerade zutrifft, und löst ein change-Event aus, wenn sich die Antwort ändert. Nimm das, wenn Verhalten (nicht nur Styling) vom Bildschirm abhängt, etwa wenn sich ein Menü auf Touch-Geräten anders öffnen soll.

Mit Bewegung funktioniert es genauso. Pack große oder endlos laufende Animationen in eine Prüfung auf prefers-reduced-motion, wie auf der Seite zu Animation gezeigt.

Container Queries: wenn die Komponente entscheiden soll

Eine Media Query kennt nur den Viewport. Eine Karte, die auf derselben Seite in einer breiten Hauptspalte und in einer schmalen Seitenleiste steht, muss stattdessen ihren eigenen Platz kennen. Das ist eine Container Query: Markiere das Elternelement mit container-type: inline-size und nimm dann @container mit denselben Bedingungen.

Zieh an der Ecke der grauen Box, um ihre Größe zu ändern. Die Karte wechselt ihr Layout bei 360px Boxbreite, egal wie groß das Fenster ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .holder {
      container-type: inline-size;
      resize: horizontal;
      overflow: hidden;
      width: 480px;
      max-width: 100%;
      min-width: 160px;
      padding: 8px;
      background: #e5e7eb;
    }
    .card { display: grid; gap: 10px; background: white; padding: 10px; border-radius: 8px; }
    .pic { height: 70px; background: #2563eb; border-radius: 6px; }

    @container (min-width: 360px) {
      .card { grid-template-columns: 120px 1fr; }
    }
  </style>
</head>
<body>
  <div class="holder">
    <div class="card"><div class="pic"></div><p>Image beside the text when the box is 360px or wider, above it when narrower.</p></div>
  </div>
</body>
</html>

Bei den anfänglichen 480px steht das Bild neben dem Text. Zieh die Box schmaler als 376px (360px Inhalt plus 8px Padding auf jeder Seite), und das Bild rutscht über den Text. Container Queries funktionieren in allen aktuellen großen Browsern.

Styles für den Druck

@media print gilt nur, wenn die Seite gedruckt oder als PDF gespeichert wird. Blende Navigation und Buttons aus und nimm dunklen Text auf Weiß:

@media print {
  nav, .ad, button { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; } /* print the URL after each link */
}

Häufige Fehler

Kein Viewport-Meta-Tag. Handys melden dann einen breiten Layout-Viewport, und Queries für kleine Bildschirme greifen nie.
Queries in der falschen Reihenfolge. Zwei zutreffende Queries mit demselben Selektor: Die spätere gewinnt. Ordne min-width-Queries von klein nach groß.
Grenzen, die sich überschneiden oder Lücken lassen. max-width: 768px und min-width: 768px treffen bei genau 768px beide zu. Nimm für eine von beiden 767px oder die Bereichssyntax (width < 768px) und (width >= 768px).
Kein Leerzeichen nach and. and( ist ungültig, und die Query wird stillschweigend verworfen.
Nur durch Verkleinern eines Desktop-Fensters testen. Prüf auch ein echtes Handy oder den Gerätemodus des Browsers, der Viewport, Pixeldichte und Touch des Handys anwendet.
Zu viele Breakpoints. Braucht jede Komponente eigene, versuch es stattdessen mit Grid auto-fit, flex-wrap oder Container Queries.

Häufig gestellte Fragen

Was ist eine Media Query in CSS?

Eine Regel, die das CSS darin nur anwendet, wenn eine Bedingung über das Gerät oder das Fenster zutrifft. @media (min-width: 600px) { ... } wendet ihre Styles nur an, wenn der Viewport mindestens 600px breit ist. So passt sich eine Seite vom Handy bis zum Desktop an.

Soll ich Media Queries mit min-width oder max-width schreiben?

Die meisten Websites arbeiten Mobile First: Das Basis-CSS ist für kleine Bildschirme, und min-width-Queries ergänzen Layout, wenn der Bildschirm wächst. max-width-Queries funktionieren andersherum und starten beim Desktop-Layout. Beides geht; beides am selben Element zu mischen, führt zu Überschneidungen und Lücken an den Grenzen.

Was sind die Standard-Breakpoints für Media Queries?

Einen offiziellen Standard gibt es nicht. Üblich sind Werte um 640px, 768px, 1024px und 1280px, aber die bessere Regel ist, einen Breakpoint dort zu setzen, wo dein eigenes Layout anfängt, falsch auszusehen, und die Zahl der Breakpoints klein zu halten.

Warum funktioniert meine Media Query auf dem Handy nicht?

Die häufigste Ursache ist ein fehlendes Viewport-Meta-Tag. Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> tun mobile Browser so, als wäre die Seite etwa 980px breit, also greifen Queries für kleine Breiten nie. Prüf auch, ob die Query nach den Regeln steht, die sie überschreibt.

Wie schreibe ich eine Media Query für den Dark Mode?

Nimm @media (prefers-color-scheme: dark) { ... }. Sie greift, wenn Betriebssystem oder Browser des Nutzers auf ein dunkles Theme eingestellt sind, und darin kannst du Farben oder CSS-Variablen überschreiben.

Was ist der Unterschied zwischen Media Queries und Container Queries?

Eine Media Query prüft den Viewport (das ganze Fenster). Eine Container Query, geschrieben mit @container, prüft die Größe eines Elternelements, das du mit container-type: inline-size markierst. Nimm Container Queries für eine Komponente, die auf derselben Seite an breiten und schmalen Stellen vorkommt.

Verwandte Konzepte