Responsive Design & Media Queries

Responsive Design bedeutet, dass sich eine Webseite automatisch an unterschiedliche Bildschirmgrößen und Geräte anpasst.

1. Warum Responsive Design?

Moderne Webseiten müssen auf Smartphones, Tablets und Desktops gleichzeitig gut funktionieren.

2. Viewport

Der Viewport beschreibt den sichtbaren Bereich der Webseite auf einem Gerät. 
<meta name="viewport"
      content="width=device-width, initial-scale=1">
Ohne korrekt gesetzten Viewport sind mobile Layouts oft unbrauchbar.

3. Mobile First

Beim Mobile-First-Ansatz wird das Layout zuerst für kleine Bildschirme entworfen.

4. Media Queries – Grundlagen

Media Queries erlauben es, CSS abhängig von Geräteeigenschaften anzuwenden. 
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

5. Typische Breakpoints

/* Smartphones */
@media (max-width: 600px) {}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {}

/* Desktop */
@media (min-width: 1025px) {}
Breakpoints sind Design-Entscheidungen, keine festen Regeln.

6. Responsive Layouts mit Grid

.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .container {
    grid-template-columns: 200px 1fr;
  }
}

7. Responsive Layouts mit Flexbox

.menu {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .menu {
    flex-direction: row;
  }
}

8. Responsive Bilder

Bilder sollten sich an die verfügbare Breite anpassen. 
img {
  max-width: 100%;
  height: auto;
}

9. Vermeiden häufiger Fehler

10. Zusammenfassung