CSS

Responsive

Responsive Design sorgt dafuer, dass Seiten auf Handy, Tablet und Desktop funktionieren — mit flexiblen Layouts und Media Queries.

Media Queries

@media wendet Regeln nur an, wenn eine Bedingung zutrifft, etwa eine Mindestbreite.

Typische Breakpoints orientieren sich am Inhalt, nicht an konkreten Geräten.

<@media><min-width><max-width>

Breakpoint

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

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

Mobile-first heisst: Die Basisregeln gelten für kleine Bildschirme, min-width-Queries ergänzen größere Layouts.

Das hält CSS einfacher, weil kleine Screens selten Sonderfälle brauchen.

Der viewport-Meta-Tag im HTML ist Voraussetzung, damit Mobilgeräte nicht heimlich zoomen.

<mobile-first><viewport>

max-width: 100% macht Bilder flexibel, ohne sie zu verzerren.

Relative Einheiten wie %, vw und rem passen sich an, wo feste Pixel brechen würden.

clamp() begrenzt einen flexiblen Wert nach unten und oben, etwa für flüssige Schriftgrößen.

<max-width><clamp()>

Flüssige Schrift

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

img {
  max-width: 100%;
  height: auto;
}

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.