@media Grundlagen

@media ist das zentrale Werkzeug für responsive Layouts. Mit Media Queries definierst du CSS-Regeln, die nur unter bestimmten Bedingungen greifen, zum Beispiel ab einer bestimmten Viewport-Breite. So passt sich dein Layout automatisch an Smartphones, Tablets und Desktop-Bildschirme an, ohne dass du separaten Code schreiben musst.

Steckbrief @media

Syntax: @media (<bedingung>) { ... }
Initialwert: N/A (At-Rule)
Vererbt: Nein
Animierbar: Nein

Kategorie: Responsive Design
Werte: 9
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

@media ist eine At-Rule, die CSS-Regeln in einen Bedingungsblock einschließt. Die Regeln darin gelten nur, wenn die Bedingung zutrifft. Die häufigste Bedingung ist die Viewport-Breite mit min-width oder max-width.

Mobile-First (empfohlen) bedeutet: Du schreibst zuerst das CSS für kleine Bildschirme und erweiterst dann mit min-width für größere. Das ist effizienter, weil mobile Geräte weniger CSS laden müssen. Desktop-First ist der umgekehrte Ansatz mit max-width: du startest mit dem Desktop-Layout und passt dann nach unten an.

Media Queries ändern keine Spezifität. Wenn zwei Regeln die gleiche Spezifität haben, gewinnt die spätere im Code. Deshalb ist die Reihenfolge bei Mobile-First wichtig: kleinere Breakpoints zuerst, größere danach.

Syntax & Werte

9 Werte

Media Types

Wert	Beschreibung	Beispiel
`all`	Gilt für alle Geräte. (Standard, wenn kein Typ angegeben)	@media all and (min-width: 768px) { ... }
`screen`	Gilt für Bildschirme (Desktop, Tablet, Smartphone).	@media screen and (min-width: 768px) { ... }
`print`	Gilt nur beim Drucken oder in der Druckvorschau.	@media print { body { font-size: 12pt; } }

Width-Bedingungen

Wert	Beschreibung	Beispiel
`min-width`	Greift ab der angegebenen Breite (aufwärts). Mobile-First-Ansatz.	@media (min-width: 768px) { ... }
`max-width`	Greift bis zur angegebenen Breite (abwärts). Desktop-First-Ansatz.	@media (max-width: 767px) { ... }
`width`	Greift nur bei exakt dieser Breite. In der Praxis selten sinnvoll.	@media (width: 768px) { ... }

Logische Operatoren

Wert	Beschreibung	Beispiel
`and`	Beide Bedingungen müssen zutreffen.	@media (min-width: 768px) and (max-width: 1023px) { ... }
`, (Komma)`	Mindestens eine Bedingung muss zutreffen (ODER-Verknüpfung).	@media (max-width: 600px), (orientation: portrait) { ... }
`not`	Negiert die gesamte Media Query.	@media not print { ... }

Beispiele

5 Beispiele

Ab 768px Breite wechselt der Hintergrund und die Schriftgröße ändert sich. Das ist die Basis von Mobile-First.

Einfache min-width Query

/* Mobile: Gelber Hintergrund (Standard) */
.box {
  background: #fef3c7;
  color: #92400e;
}

/* Ab 768px: Grüner Hintergrund */
@media (min-width: 768px) {
  .box {
    background: #d1fae5;
    color: #065f46;
  }
}

<div class="mq-basic">
<div class="label">Ändere die Vorschau-Breite!</div>
<div class="info">Unter 500px: Gelb | Ab 500px: Grün</div>
</div>

Die Karten stapeln sich auf kleinen Bildschirmen und wechseln zu 2 und dann 3 Spalten bei größeren Viewports.

Mobile-First Card-Grid

/* Mobile: 1 Spalte */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet: 2 Spalten */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="mq-grid">
<div class="mq-card">
  <h4>Card 1</h4>
  <p>1 Spalte auf Mobile</p>
</div>
<div class="mq-card">
  <h4>Card 2</h4>
  <p>2 Spalten ab 400px</p>
</div>
<div class="mq-card">
  <h4>Card 3</h4>
  <p>3 Spalten ab 650px</p>
</div>
</div>

Bei Desktop-First startest du mit dem Desktop-Layout und passt mit max-width nach unten an. Hier wird eine horizontale Navigation auf Mobile zu einer vertikalen Liste.

Desktop-First Navigation

/* Desktop: Horizontale Navigation */
nav ul {
  display: flex;
  gap: 1rem;
}

/* Mobile: Vertikale Navigation */
@media (max-width: 767px) {
  nav ul {
    flex-direction: column;
    gap: 0.25rem;
  }
}

<nav class="mq-nav">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Docs</a></li>
  <li><a href="#">Kurse</a></li>
</ul>
</nav>

Mit and kombinierst du mehrere Bedingungen, um nur einen bestimmten Bereich anzusprechen, zum Beispiel nur Tablets.

Bereich mit and eingrenzen

/* Nur Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    display: none;
  }

  .content {
    max-width: 100%;
  }
}

<div class="mq-range">
<div class="label">Tablet-Bereich</div>
<div class="value">Blau zwischen 400px und 700px</div>
</div>

@media print definiert Regeln, die nur beim Drucken gelten. Damit entfernst du Navigation und Hintergrundfarben für saubere Ausdrucke.

Print-Stylesheet

@media print {
  /* Navigation und Footer ausblenden */
  nav, footer, .sidebar {
    display: none;
  }

  /* Hintergrundfarben entfernen */
  body {
    background: white;
    color: black;
  }

  /* Links als Text anzeigen */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

<div class="mq-print">
<div class="screen-only">Navigation (nur am Bildschirm)</div>
<div class="content">
  <h4>Artikel-Inhalt</h4>
  <p>Dieser Text wird gedruckt, die Navigation nicht.</p>
</div>
</div>

Barrierefreiheit

Responsive Design ist ein zentraler Baustein der Barrierefreiheit. Achte darauf, dass Touch-Targets auf mobilen Geräten mindestens 44x44px groß sind (WCAG 2.5.5). Verwende relative Einheiten (rem, em) statt fester Pixel für Schriftgrößen, damit Nutzer die Textgröße im Browser anpassen können.

Vergiss nicht die Media Features für Barrierefreiheit wie prefers-reduced-motion und prefers-contrast. Diese werden im Artikel Media Features ausführlich behandelt.

Häufige Fehler

4 Punkte

min-width und max-width gemischt verwenden ohne klare Strategie. Entscheide dich für Mobile-First (min-width) oder Desktop-First (max-width) und bleibe dabei. Mischen führt zu unvorhersehbaren Überlappungen.
Breakpoints an Geräten orientieren statt am Design. Statt 768px (iPad) solltest du den Breakpoint dort setzen, wo dein Layout tatsächlich bricht. Geräte-Breiten ändern sich ständig.
Den Viewport-Meta-Tag vergessen. Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> ignorieren mobile Browser deine Media Queries und rendern die Desktop-Version verkleinert.
Falsche Reihenfolge bei Mobile-First. Bei min-width müssen kleinere Breakpoints zuerst kommen, da spätere Regeln bei gleicher Spezifität gewinnen. @media (min-width: 1024px) vor @media (min-width: 768px) überschreibt das Tablet-Layout.

Browser-Kompatibilität

5 von 5

Media Queries werden von allen modernen Browsern vollständig unterstützt. Level-3-Features wie min-width, max-width und logische Operatoren sind seit über einem Jahrzehnt stabil.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Media Queries werden in E-Mail-Clients nur eingeschränkt unterstützt. Gmail entfernt sie vollständig, Outlook ignoriert sie ebenfalls.

Apple Mail

Teilweise

Grundlegende Width-Queries funktionieren
Gmail

Keine

Media Queries werden komplett entfernt
Outlook

Keine

Kein Support für Media Queries
Thunderbird

Teilweise

Grundlegende Width-Queries funktionieren
Yahoo Mail

Teilweise

Eingeschränkter Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da