Dieselbe Seite, zwei Bildschirme
Du öffnest die Seite deines Vereins am Handy. Alles ist winzig, und du musst hin und her wischen.
Am Computer sieht dieselbe Seite gut aus. Eine Seite, die sich der Breite des Bildschirms anpasst, heißt responsiv.
Am Ende dieser Lektion
Notiz
Ich kann eine Seite mit einer Medienabfrage an schmale Bildschirme anpassen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Responsiv | Die Seite passt sich der Bildschirmbreite an. | |
| Viewport | Der sichtbare Bereich der Seite auf dem Bildschirm. | |
| Medienabfrage | Eine Regel, die nur bei einer bestimmten Breite gilt. | @media (max-width: 600px) |
| Prozent | Ein Teil der Breite des Elternelements. | width: 50%; |
| Breakpoint | Die Breite, ab der sich das Layout ändert. |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Start: Das weißt du schon
Probier es aus
Start: Das weißt du schon
4 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Der Viewport-Tag im head
Ein Handy tut oft so, als wäre sein Bildschirm breit. Dann ist alles klein. Das stoppst du mit einer Zeile im head der Seite:
<meta name="viewport" content="width=device-width, initial-scale=1">
Sie sagt dem Handy: Nimm die echte Breite des Bildschirms.
Eine Medienabfrage ändert das Layout
Eine Medienabfrage beginnt mit @media. In der Klammer steht die Bedingung, zum Beispiel (max-width: 600px).
Die Regeln darin gelten nur, wenn das Fenster höchstens 600 Pixel breit ist. Bei größeren Fenstern werden sie ignoriert.
Probiere es aus: Karten am Handy
<div class="reihe">
<div class="karte">Montag: Training</div>
<div class="karte">Mittwoch: Spiel</div>
<div class="karte">Freitag: Pizza</div>
</div>
Kontrolle: Medienabfrage
Probier es aus
Kontrolle: Medienabfrage
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.