Für jeden Bildschirm gestalten
Deine Seite wird auf einem Handy gelesen, auf einem Tablet, auf einem großen Bildschirm – und vielleicht vorgelesen. Sie muss überall funktionieren. Das nennt man responsiv.
Die Grundlage: nichts festnageln
Die meiste Arbeit erledigt sich von selbst, wenn man keine festen Breiten vorgibt. Ein <p> ohne jede CSS-Regel ist bereits responsiv – es füllt den vorhandenen Platz und bricht um.
Vier Regeln, die fast immer richtig sind:
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { max-width: 70rem; margin-inline: auto; padding: 1rem; }max-widthstattwidth– so wird es bei wenig Platz schmaler statt überzustehen- Bilder nie breiter als ihr Platz
- Innenabstand am
body, damit der Text auf dem Handy nicht am Rand klebt
Mit der Größe rechnen
clamp(kleinster, gewünschter, größter) klemmt einen Wert zwischen zwei Grenzen ein.
clamp(1.5rem, 5vw, 3rem) bedeutet: „Nimm 5 % der Fensterbreite – aber nie weniger als 1.5rem und nie mehr als 3rem."
Damit wächst die Schrift mit dem Bildschirm, ohne auf dem Handy unlesbar klein und auf dem Fernseher absurd groß zu werden. Und man braucht dafür keine einzige Fallunterscheidung.
Fallunterscheidungen: Media Queries
Manches lässt sich nicht rechnen. Dann fragt man nach der Fensterbreite.
@media (min-width: 45rem) {
/* gilt nur, wenn das Fenster mindestens 45rem breit ist */
}Eine Media Query ist eine Bedingung. Die Regeln darin gelten nur, wenn sie erfüllt ist – so wie ein if in Java.
Schreib von schmal nach breit. Also zuerst die Regeln für kleine Bildschirme, dann mit min-width die Ergänzungen für größere. Man nennt das mobile first.
Der Grund: Auf einem schmalen Bildschirm ist einfach alles untereinander – das ist der einfachste Fall und der Ausgangszustand von HTML. Alles Weitere kommt hinzu, wenn Platz da ist.
a) Verschiebe die Trennlinie langsam. An welcher Stelle springt das Layout um?
b) Ändere 45rem auf 30rem. Was ändert sich?
c) Schreibe die Media Query um: Sie soll max-width statt min-width benutzen und dasselbe Ergebnis liefern. Warum ist die min-width-Fassung trotzdem die bessere?
Was der Browser sonst noch weiß
prefers-color-scheme fragt nach der Einstellung des Betriebssystems. Es gibt noch mehr solcher Fragen:
| Abfrage | Bedeutung |
|---|---|
prefers-reduced-motion |
Jemand hat Animationen abgeschaltet – oft wegen Übelkeit bei Bewegung. |
print |
Die Seite wird gedruckt. |
hover: none |
Das Gerät kennt kein Überfahren mit der Maus, also ein Touchscreen. |
Bemerkenswert daran: Der Browser weiß Dinge über die Person vor dem Bildschirm und ihre Bedürfnisse – und du kannst darauf eingehen, ohne irgendetwas über sie zu erfahren. Die Seite fragt nicht „wer bist du", sondern „was brauchst du".
Beachte auch, wie wenig Arbeit die eigenen Eigenschaften aus Lektion 3 hier machen: Für das dunkle Design mussten nur drei Werte neu gesetzt werden, nicht jede einzelne Regel.
Aufgabe
Baue eine Kartenübersicht, die sich anpasst:
a) Die Karten sollen in einem Raster liegen, das von selbst so viele Spalten macht, wie bei mindestens 14rem Breite hineinpassen.
b) Der Abstand zwischen den Karten soll zwischen 0.5rem und 2rem mit der Fensterbreite wachsen.
c) Die Überschrift soll zwischen 1.5rem und 2.5rem mitwachsen.
d) Ab 50rem Fensterbreite soll die Seite höchstens 60rem breit und zentriert sein.
Tipp 1: zu a)
Die Zeile kennst du aus Lektion 5 – nur mit einer anderen Mindestbreite.
Tipp 2: zu b) und c)
gap und font-size vertragen beide ein clamp(…).