Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >@media

@media

@media [Typ] [and] (Bedingung) { … }

Die Stile darin gelten nur, wenn Gerät und Fenster die Bedingung erfüllen. Die Grundlage einer responsiven Website: @media (min-width: 700px) { … } ergänzt ein Layout für breitere Bildschirme. Bedingungen lassen sich kombinieren und verschachteln; der Browser wertet sie bei jeder Änderung des Fensters neu aus.

Werte

Typ – screen, print, all (Standard).
(width >= 600px), (400px <= width < 800px) – Bereichssyntax; Chrome ab 104, Firefox ab 102, Safari ab 16.4. Die ältere Syntax: (min-width: 600px), (max-width: 799px).
(orientation: landscape), (aspect-ratio > 16/9) – die Form des Fensters.
(hover: hover), (pointer: coarse) – Maus oder Touch.
(prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active) – Einstellungen des Nutzers.
(resolution >= 2x) – die Pixeldichte des Displays.
and, ein Komma (oder), not, or innerhalb einer Bedingung (Chrome ab 104, Firefox ab 64, Safari ab 16.4).

Beispiele

Mobile First: Auf einem schmalen Bildschirm stehen die Karten untereinander, ab 700 px in zwei Spalten:

.cards {
  display: grid;
  gap: 16px;
}
@media (width >= 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

Das Ergebnis: Bei einer Fensterbreite unter 700 px stehen die Karten in einer Spalte, ab 700 px in zwei.

Beim Drucken verschwinden Menü und Fußzeile, der Text ist schwarz auf Weiß:

@media print {
  nav,
  footer,
  .ad { display: none; }
  body {
    background: #fff;
    color: #000;
  }
}

Worauf Sie achten sollten

Auf dem Handy muss die Seite im Kopf <meta name="viewport" content="width=device-width, initial-scale=1"> haben, sonst gibt sie sich als etwa 980 px breit aus und die Bedingungen für die Breite greifen nicht.
em und rem in einer Bedingung werden von der Standardschriftgröße des Browsers berechnet (meist 16 px), nicht von der im CSS gesetzten font-size.
Die Grenzen überschneiden sich leicht: (max-width: 700px) und (min-width: 700px) gelten bei einer Breite von genau 700 px beide. Die Bereichssyntax (width < 700px und width >= 700px) löst das.
In einer Bedingung funktioniert var() nicht. Regeln in @media haben keine höhere Priorität – bei gleicher Spezifität entscheidet die Reihenfolge, schreiben Sie sie also nach den Grundstilen.
Nach der Größe der umgebenden Komponente statt des Fensters entscheidet @container.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 3. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
@container
prefers-color-scheme
prefers-reduced-motion
@supports
:hover
Längeneinheiten (px, em, rem, %, vw…)