HTML & CSS

Media Queries und Responsive Design: Websites für jeden Bildschirm

Vom Handy bis zum großen Monitor: Du lernst, wie Media Queries funktionieren, warum Mobile First die bessere Strategie ist und wie moderne Techniken wie clamp() und Container Queries dir Breakpoints ersparen.

Anton

— 3 Min. Lesezeit
Teilen

Deine Nutzer kommen mit ganz unterschiedlichen Geräten: schmales Smartphone im Hochformat, Tablet, breiter Desktop-Monitor. Ein Layout, das nur auf einer Bildschirmgröße gut aussieht, fühlt sich auf allen anderen falsch an – zu gequetscht oder viel zu weit auseinandergezogen. Responsive Design ist die Antwort darauf: Deine Seite passt sich flexibel an den verfügbaren Platz an. Das wichtigste Werkzeug dafür sind Media Queries. In diesem Beitrag lernst du, wie sie funktionieren, warum du am besten von klein nach groß denkst und mit welchen modernen CSS-Funktionen du oft ganz ohne feste Breakpoints auskommst.

Der Grundstein: das Viewport-Meta-Tag

Bevor Media Queries überhaupt greifen, brauchst du eine Zeile im <head> deiner HTML-Seite. Ohne sie rendern mobile Browser die Seite in einer künstlich breiten Ansicht und skalieren sie herunter – deine Media Queries laufen dann ins Leere.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

width=device-width sagt dem Browser, die tatsächliche Gerätebreite als Grundlage zu nehmen, und initial-scale=1.0 setzt den Zoom auf einen normalen Startwert. Diese Zeile gehört in jedes responsive Projekt.

Media Queries: die Grundlagen

Eine Media Query ist ein CSS-Block, der nur unter bestimmten Bedingungen angewendet wird. Am häufigsten prüfst du die Breite des Viewports mit min-width oder max-width. Alles innerhalb der geschweiften Klammern gilt nur, wenn die Bedingung zutrifft.

.karte {
  padding: 1rem;
  font-size: 1rem;
}

/* Gilt erst ab 768px Viewport-Breite */
@media (min-width: 768px) {
  .karte {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

Auf schmalen Geräten bleibt das Padding klein, ab 768 Pixeln wird es großzügiger. Wichtig zu verstehen: Die Media Query überschreibt nur die genannten Eigenschaften. Alles andere aus der Basis-Regel bleibt bestehen.

Mobile First: von klein nach groß denken

Du könntest Media Queries auch mit max-width schreiben und dein Desktop-Layout nach unten hin einschränken. In der Praxis hat sich aber Mobile First durchgesetzt: Du schreibst zuerst das Layout für kleine Bildschirme und erweiterst es dann schrittweise mit min-width für größere. Das führt zu schlankerem, besser wartbarem CSS, weil die einfachste Variante die Basis bildet.

/* Basis: mobil, alles untereinander */
.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tablet: nebeneinander ab 768px */
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

/* Desktop: Inhalt zentrieren und begrenzen ab 1200px */
@media (min-width: 1200px) {
  .layout {
    max-width: 1140px;
    margin: 0 auto;
  }
}

Jede Query baut auf der vorherigen auf. Die Breakpoints 768px und 1200px sind gängige Richtwerte, aber keine Naturgesetze – orientier dich lieber daran, wo dein Layout zu brechen beginnt, statt an konkreten Gerätemodellen.

Weniger Breakpoints dank relativer Einheiten

Der eleganteste responsive Code kommt oft mit erstaunlich wenigen Media Queries aus. Der Trick sind relative Einheiten und flexible Funktionen. Mit clamp() gibst du einen Minimalwert, einen bevorzugten (mitwachsenden) Wert und einen Maximalwert an – die Schriftgröße skaliert dann stufenlos mit dem Viewport, ganz ohne Query.

h1 {
  /* nie kleiner als 1.5rem, nie größer als 3rem */
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* Spalten, die sich selbst umbrechen */
.galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Die Grid-Regel ist besonders praktisch: auto-fit zusammen mit minmax(250px, 1fr) packt so viele Spalten in eine Reihe, wie mit mindestens 250 Pixeln Breite Platz haben, und bricht den Rest automatisch um. Das ersetzt gleich mehrere Breakpoints.

Container Queries: der moderne Ansatz

Media Queries reagieren immer auf den gesamten Viewport. Oft willst du aber, dass sich eine Komponente danach richtet, wie viel Platz ihr Container gerade hat – etwa eine Karte, die in einer schmalen Seitenleiste anders aussehen soll als im breiten Hauptbereich. Genau das lösen Container Queries.

/* Das Elternelement zum Container erklären */
.karten-liste {
  container-type: inline-size;
}

/* Reagiert auf die Breite des Containers, nicht des Bildschirms */
@container (min-width: 400px) {
  .karte {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
  }
}

Dieselbe Karte richtet sich jetzt allein danach, wie breit ihr Container ist. Das macht Komponenten wirklich wiederverwendbar, egal wo du sie einsetzt. Container Queries werden von allen aktuellen Browsern unterstützt und sind bei neuen Projekten eine ernsthafte Ergänzung zu klassischen Media Queries.

Fazit

Responsive Design bedeutet, Layouts zu bauen, die sich an ihren Platz anpassen statt umgekehrt. Der Einstieg ist das viewport-Meta-Tag, das Arbeitspferd sind Media Queries mit min-width, und die beste Strategie ist Mobile First – von der einfachen kleinen Variante schrittweise nach oben. Setz zusätzlich auf relative Einheiten und Funktionen wie clamp() sowie auto-fit-Grids, um dir viele Breakpoints zu sparen. Und wenn du Komponenten baust, die überall passen sollen, greif zu Container Queries. Mit diesen Bausteinen fühlt sich deine Seite auf dem Handy genauso stimmig an wie auf dem großen Monitor.

Weiterlesen