Responsives Design

Zuletzt aktualisiert am 10. Februar 2026

In den letzten Artikeln hast du Viewport-Einheiten, Custom Properties und clamp() kennengelernt. All das sind Bausteine für Layouts, die sich an verschiedene Bildschirmgrößen anpassen. Aber das zentrale Werkzeug für responsives Design fehlt noch: Media Queries. Damit kannst du CSS-Regeln schreiben, die nur ab einer bestimmten Bildschirmbreite gelten.

Der Viewport Meta-Tag

Bevor Media Queries funktionieren, braucht dein HTML einen entscheidenden Meta-Tag im <head>:

Der Viewport Meta-Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width setzt die Seitenbreite auf die Gerätebreite
  • initial-scale=1 verhindert automatisches Zoomen

Dieser Meta-Tag gehört in jede moderne Website. Ohne ihn greifen Media Queries auf Mobilgeräten nicht wie erwartet.

Media Queries Grundlagen

Eine Media Query ist eine Bedingung, die CSS-Regeln ein- oder ausschaltet. Die häufigste Form prüft die Viewport-Breite:

Eine einfache Media Query
.box {
  background: #dbeafe;
  border: 2px solid #1a56db;
}

@media (min-width: 500px) {
  .box {
    background: #d1fae5;
    border-color: #059669;
  }
}

Alles innerhalb von @media (min-width: 500px) { ... } gilt nur, wenn der Viewport mindestens 500 Pixel breit ist. Darunter gelten die Basis-Regeln.

Mehrere Bedingungen

Du kannst Bedingungen mit and kombinieren oder mit Komma (,) als “oder” verknüpfen:

Kombinierte Bedingungen
/* Zwischen 600px und 900px */
@media (min-width: 600px) and (max-width: 900px) {
  .element { font-size: 18px; }
}

/* Hoch- ODER Querformat */
@media (orientation: portrait), (orientation: landscape) {
  .element { padding: 16px; }
}

/* Bevorzugt dunkles Farbschema */
@media (prefers-color-scheme: dark) {
  body { background: #1f2937; color: #f3f4f6; }
}

prefers-color-scheme ist besonders nützlich: Damit reagierst du auf die Systemeinstellung des Nutzers (Dark Mode ein/aus), ohne dass JavaScript nötig ist.

Mobile-First vs. Desktop-First

Es gibt zwei Ansätze, um responsive Layouts aufzubauen:

Mobile-First Layout
/* Mobile-First: Basis = Mobile */
.grid {
  display: grid;
  gap: 8px;
}

/* Ab 500px: zwei Spalten */
@media (min-width: 500px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

Mobile-First (empfohlen)

Du schreibst zuerst das CSS für kleine Bildschirme und erweiterst mit min-width:

/* Basis: Mobile (kein Media Query nötig) */
.nav { display: block; }

/* Tablet */
@media (min-width: 768px) {
  .nav { display: flex; }
}

/* Desktop */
@media (min-width: 1024px) {
  .nav { gap: 24px; }
}

Desktop-First

Du schreibst zuerst das Desktop-CSS und reduzierst mit max-width:

/* Basis: Desktop */
.nav { display: flex; gap: 24px; }

/* Tablet */
@media (max-width: 1023px) {
  .nav { gap: 16px; }
}

/* Mobile */
@media (max-width: 767px) {
  .nav { display: block; }
}

Warum Mobile-First besser ist:

  • Mobile Geräte laden weniger CSS (die Basis-Regeln reichen)
  • Du baust von einfach zu komplex auf, was zu saubererem Code führt
  • Die meisten Nutzer kommen über Mobilgeräte

Gängige Breakpoints

Es gibt keine “richtigen” Breakpoints, aber diese Werte haben sich als Orientierung etabliert:

BreakpointZielgeräteMedia Query (Mobile-First)
640pxGroße Smartphones@media (min-width: 640px)
768pxTablets@media (min-width: 768px)
1024pxKleine Laptops@media (min-width: 1024px)
1280pxDesktops@media (min-width: 1280px)

Wichtig: Wähle Breakpoints nach deinem Design, nicht nach bestimmten Geräten. Wenn dein Layout ab 820px besser zweispaltig aussieht, nimm 820px. Die Tabelle oben ist ein Startpunkt, kein festes Regelwerk.

Fluid Design

Media Queries allein erzeugen “Sprünge”: Bis 767px sieht das Layout so aus, ab 768px anders. Fluid Design sorgt für fließende Übergänge, indem du Viewport-Einheiten und clamp() einsetzt.

Fluid Design mit clamp()
.heading {
  /* Skaliert von 1.25rem bis 2.5rem */
  font-size: clamp(1.25rem, 3vw + 0.5rem, 2.5rem);
}

.container {
  width: clamp(300px, 90%, 800px);
  padding: clamp(12px, 3vw, 32px);
}

Hier passiert alles ohne einen einzigen Breakpoint. clamp() sorgt dafür, dass die Werte fließend zwischen Minimum und Maximum skalieren. Das Ergebnis: Ein Layout, das auf 320px Smartphones genauso gut funktioniert wie auf 2560px Ultrawide-Monitoren.

Fluid Design und Media Queries kombinieren

In der Praxis verwendest du beides zusammen. Fluid Design für Schriftgrößen und Abstände, Media Queries für Layout-Änderungen (einspaltiges vs. mehrspaltiges Layout):

Fluid + Media Queries
.layout {
  display: grid;
  gap: clamp(12px, 2vw, 24px);
}

@media (min-width: 600px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  padding: clamp(12px, 2vw, 20px);
}

Die Gap- und Padding-Werte skalieren fließend, während das Grid-Layout bei 600px von einer auf zwei Spalten wechselt.

Responsive Bilder

Bilder können auf kleinen Bildschirmen aus ihrem Container herausragen, wenn sie breiter als der Viewport sind. Die einfachste Lösung:

Responsive Bilder
img {
  max-width: 100%;
  height: auto;
}

max-width: 100% sorgt dafür, dass ein Bild nie breiter als sein Container wird, aber bei genug Platz in Originalgröße angezeigt wird. height: auto behält das Seitenverhältnis bei. Diese zwei Zeilen sollten Teil jedes CSS-Resets sein.

Häufige Fehler

  • Viewport Meta-Tag vergessen: Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> zeigt der mobile Browser die Desktop-Version an. Media Queries greifen dann nicht wie erwartet.
  • Breakpoints an Geräten orientieren: “iPhone 14 ist 393px breit” ist kein guter Breakpoint. Setze Breakpoints dort, wo dein Design bricht, nicht wo ein bestimmtes Gerät aufhört.
  • Zu viele Breakpoints: Drei bis vier Breakpoints reichen für die meisten Websites. Mehr machen das CSS schwer wartbar.
  • max-width und min-width mischen: Das führt zu verwirrenden Regeln, die sich gegenseitig überschreiben. Entscheide dich für einen Ansatz (am besten Mobile-First mit min-width).
  • Feste Pixel-Breiten für Layouts: width: 960px auf einem 360px Smartphone erzeugt einen horizontalen Scrollbalken. Verwende Prozentwerte oder clamp() für Hauptcontainer.
  • Bilder ohne max-width: 100%: Große Bilder sprengen auf kleinen Bildschirmen das Layout. Setze die Regel global.

Zusammenfassung

KonzeptBeschreibung
Viewport Meta-Tag<meta name="viewport" content="width=device-width, initial-scale=1">
Media Query@media (min-width: 768px) { ... } für bedingte CSS-Regeln
Mobile-FirstBasis-CSS für Mobile, Erweiterung per min-width (empfohlen)
Desktop-FirstBasis-CSS für Desktop, Reduktion per max-width
BreakpointsOrientierung: 640px, 768px, 1024px, 1280px (anpassbar)
Fluid Designclamp(), vw, % für fließende Werte ohne Sprünge
Responsive Bilderimg { max-width: 100%; height: auto; }
prefers-color-schemeReagiert auf die Dark/Light-Systemeinstellung

Damit hast du alle CSS-Grundlagen abgeschlossen. Du weißt jetzt, wie CSS funktioniert, wie Selektoren und die Kaskade arbeiten, wie das Box-Modell aufgebaut ist, welche Einheiten und Funktionen es gibt, und wie du Layouts baust, die auf jedem Bildschirm funktionieren. Mit diesem Wissen bist du bereit für die nächsten Schritte: Flexbox, Grid und fortgeschrittene Layout-Techniken.

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.