@media Grundlagen

Zuletzt aktualisiert am 15. Februar 2026

@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.

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

Media Types

Width-Bedingungen

Logische Operatoren

Beispiele

Einfache min-width Query

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

/* 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>

Mobile-First Card-Grid

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

/* 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>

Desktop-First Navigation

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: 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>

Bereich mit and eingrenzen

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

/* 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>

Print-Stylesheet

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

@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

• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften