CSS Responsive Design

Mobile First, Media Queries, Breakpoints, fluid layout und responsive Bilder. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Mobile-First-CSS schreiben
• Media Queries und Breakpoints sinnvoll wählen
• typische Smartphone-Probleme vermeiden

Erklärung

Responsive Design bedeutet, dass Inhalte auf verschiedenen Bildschirmgrößen gut nutzbar bleiben. Mobile First startet mit der schmalen Ansicht und ergänzt Regeln für größere Viewports.

Breakpoints sollten sich am Layout orientieren, nicht an einzelnen Gerätemodellen. Wenn ein Layout bricht, ist ein Breakpoint sinnvoll.

Beispiele

.content {
  width: min(100% - 2rem, 68rem);
  margin-inline: auto;
}

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Die Basis funktioniert mobil, größere Bildschirme erhalten zusätzliche Spalten.

<img src="team.jpg" alt="Lerngruppe im Weblabor" width="1200" height="800">

Bilder brauchen flexible CSS-Regeln wie max-width: 100%, damit sie nicht überlaufen.

Typische Fehler

• Desktop zuerst bauen und mobile Ansicht später reparieren.
• Feste Breiten wie 1200px ohne Maximalbegrenzung verwenden.
• Navigationen auf kleinen Bildschirmen nicht testen.

Best Practices

• Starte mit lesbarer mobiler Darstellung.
• Nutze flexible Breiten und robuste Raster.
• Prüfe Touch-Ziele, Textumbruch und horizontales Scrollen.

Kleine Übung

Überarbeite ein dreispaltiges Desktop-Layout so, dass es mobil einspaltig startet und ab 48rem zu drei Spalten wird.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Grid
• Nächste Seite: CSS Animationen und Übergänge
• Zur Übersicht
• Layout und Responsive Design
• CSS Grid