Responsive
Responsive Design sorgt dafuer, dass Seiten auf Handy, Tablet und Desktop funktionieren — mit flexiblen Layouts und Media Queries.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
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.
.grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Mobile-first
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.
Flexible Groessen
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.
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
img {
max-width: 100%;
height: auto;
}Vertiefung
Mobile-first heißt: erst der Normalfall
Mobile-first beginnt mit dem kleinen Layout und ergänzt mit min-width-Queries. So bleibt das Basis-CSS einfach, und größere Screens bekommen gezielte Erweiterungen.
Breakpoints orientieren sich am Inhalt: Wenn eine Zeile unlesbar wird oder Karten zu schmal werden, ist der Punkt erreicht. Gerätenamen sind dafür keine gute Grundlage.
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 48rem) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Merksatz: Kleine Screens sind die Basis. min-width-Queries ergänzen, statt große Layouts nachträglich zu reparieren.
Übungsaufgabe
Mobile-first Breakpoints
Baue ein Layout, das mobil einspaltig und ab 48rem dreispaltig ist. Passe zusätzlich die Überschrift mit clamp() an.
Das soll dein Programm können
- Basislayout einspaltig
- @media (min-width: 48rem) für drei Spalten
- gap statt margins zwischen den Spalten
- clamp() für die Überschrift
- Kommentar, warum der Breakpoint gewählt wurde
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Schreibe zuerst die mobilen Regeln ohne Media Query. Innerhalb der Query überschreibst du nur, was sich ändert.
Lösung anzeigen
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
/* Ab 48rem passen drei Karten nebeneinander, ohne zu schmal zu werden. */
@media (min-width: 48rem) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Warum funktioniert das?
Die mobile Regel bleibt der Ausgangspunkt. Die Query ergänzt nur die Spaltenzahl; gap und Typografie gelten weiterhin.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.