Responsive Design: Media Queries, relative Einheiten

Passe deine Oberflächen an jede Bildschirmgröße an, mit dem Mobile-First-Ansatz, Media Queries und den Einheiten rem, % und vw.

9 Min. · 3 Fragen

Der professionelle Ansatz ist Mobile-First: Du schreibst zuerst die Stile für kleine Bildschirme und verbesserst das Layout dann mit min-width-Media-Queries, sobald mehr Platz vorhanden ist. Das Basis-CSS bleibt einfach, und jeder Breakpoint fügt nur das hinzu, was sich tatsächlich ändert.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

Was die Einheiten angeht, verbanne Pixel für die Typografie. 1rem entspricht der Schriftgröße des Wurzelelements (standardmäßig 16px) und respektiert vor allem die Schriftgrößen-Einstellung, die der Nutzer in seinem Browser gewählt hat. Ein sehbehinderter Nutzer, der seine Schrift auf 20px stellt, sieht deine ganze Website proportional mitwachsen - vorausgesetzt, du hast rem verwendet.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

Für Breiten kombinierst du relative Einheiten: %, um einen Anteil des Elternelements einzunehmen, max-width, um sie auf großen Bildschirmen zu begrenzen, vw für Größen, die an die Viewport-Breite gebunden sind (1vw entspricht 1 % davon). Die Funktion clamp(min, ideal, max) erzeugt fließende Werte, die sich ohne jede Media Query anpassen - perfekt für große Überschriften.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welche Media Query nutzt du bei einem Mobile-First-Ansatz, um große Bildschirme anzusprechen?
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. Wem entspricht 1rem standardmäßig?
   • 10 Pixel, ein fester Wert im CSS-Standard
   • Der Schriftgröße des Elternelements
   • Der Schriftgröße des Wurzelelements, standardmäßig 16px
3. Wem entspricht 50vw?
   • 50 % der Viewport-Breite
   • 50 % der Breite des Elternelements
   • 50 Pixel, unabhängig vom Fenster