HTML & CSS

Responsive Webdesign mit Media Queries

Media Queries passen dein Layout an jede Bildschirmgröße an. Du lernst den Mobile-First-Ansatz und baust Seiten, die auf Handy, Tablet und Desktop gut aussehen.

Anton

— 2 Min. Lesezeit
Teilen
Responsive Webdesign mit Media Queries

Heute besuchen Menschen Webseiten mit den unterschiedlichsten Geräten, vom kleinen Smartphone bis zum großen Monitor. Responsive Webdesign sorgt dafür, dass deine Seite überall gut aussieht. Das wichtigste Werkzeug dafür sind Media Queries, mit denen du CSS-Regeln abhängig von der Bildschirmgröße anwendest. In diesem Beitrag lernst du, wie sie funktionieren und wie du den bewährten Mobile-First-Ansatz nutzt.

Der Viewport-Meta-Tag

Bevor Media Queries auf Mobilgeräten richtig wirken, brauchst du im <head> deiner Seite den Viewport-Meta-Tag. Ohne ihn skalieren Smartphones die Seite einfach herunter:

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

Dieser Tag teilt dem Browser mit, dass die Seitenbreite der Gerätebreite entsprechen soll. Er ist die Grundvoraussetzung für jedes responsive Design.

Was ist eine Media Query?

Eine Media Query ist ein Block in deinem CSS, der nur unter bestimmten Bedingungen gilt, etwa ab einer bestimmten Breite. Die Syntax beginnt mit @media:

/* Standardregeln für alle Größen */
body {
  font-size: 16px;
}

/* Nur ab 768px Breite anwenden */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Die Bedingung min-width: 768px bedeutet: Diese Regeln greifen, sobald der Bildschirm mindestens 768 Pixel breit ist.

Der Mobile-First-Ansatz

Beim Mobile-First-Ansatz schreibst du zuerst die Stile für kleine Bildschirme und erweiterst sie dann für größere. Das hält den Code schlank und sorgt dafür, dass Mobilgeräte nicht unnötige Regeln laden:

/* Basis: für Mobilgeräte */
.spalten {
  display: flex;
  flex-direction: column;
}

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

/* Ab Desktop: mehr Abstand */
@media (min-width: 1200px) {
  .spalten {
    gap: 32px;
  }
}

Du beginnst also mit der einfachsten Darstellung und fügst mit jedem Breakpoint nur das hinzu, was auf größeren Bildschirmen anders sein soll.

Typische Breakpoints

Breakpoints sind die Breiten, bei denen sich dein Layout ändert. Es gibt keine offiziellen Pflichtwerte, aber einige haben sich bewährt:

  • Bis 767px: Smartphones, einspaltige Layouts.
  • Ab 768px: Tablets, oft zweispaltig.
  • Ab 1024px: kleinere Laptops.
  • Ab 1200px: große Desktops mit viel Raum.

Wichtig ist, dass du Breakpoints am Inhalt ausrichtest und nicht an konkreten Geräten. Setze einen Breakpoint dort, wo dein Layout zu brechen beginnt.

Responsive Raster in der Praxis

Media Queries lassen sich wunderbar mit Grid kombinieren. Hier ein Beispiel, das die Spaltenzahl je nach Breite anpasst:

.galerie {
  display: grid;
  grid-template-columns: 1fr; /* mobil: eine Spalte */
  gap: 16px;
}

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

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

So wächst die Galerie von einer Spalte auf dem Handy bis zu drei Spalten auf dem Desktop, ganz ohne JavaScript.

Fazit

Responsive Webdesign ist heute kein Extra mehr, sondern Standard. Mit dem Viewport-Meta-Tag schaffst du die Grundlage, mit Media Queries passt du dein Layout an jede Bildschirmgröße an. Der Mobile-First-Ansatz hilft dir, sauberen und schlanken Code zu schreiben, indem du von klein nach groß denkst. Orientiere deine Breakpoints am Inhalt und teste deine Seite in verschiedenen Breiten. Mit etwas Übung wird responsives Arbeiten zur Selbstverständlichkeit und deine Seiten sehen überall gut aus.

Weiterlesen