Zusammenfassung

In dieser Lektion hast du die Startseite des Tierheims responsiv gemacht und gelernt:

• Eine responsive Seite passt ihr Layout an die Breite des Bildschirms an. In der Leiste über der Vorschau siehst du eine Seite so breit wie ein Smartphone (375 px), ein Tablet (768 px) oder einen Computer (1280 px).
• Jede responsive Seite braucht <meta name="viewport" content="width=device-width, initial-scale=1"> im head. Ohne sie bauen Smartphones die Seite so auf, als wäre ihr Bildschirm etwa 980 px breit.
• In CSS schreibt man Stile, die nur für manche Breiten gelten sollen, in eine Media Query: @media (width >= 48rem) { ... }. In Tailwind setzt du stattdessen ein Präfix vor eine Klasse: md:text-6xl.
• Eine Klasse ohne Präfix gilt in jeder Breite, eine Klasse mit Präfix ab ihrem Breakpoint aufwärts: sm: ab 640 px, md: ab 768 px, lg: ab 1024 px, xl: ab 1280 px und 2xl: ab 1536 px.
• Mobile First: Gestalte die Seite für ein Smartphone mit Klassen ohne Präfix und füge dann Klassen mit Präfix hinzu für das, was sich auf breiteren Bildschirmen ändert.
• Ein Element kann Klassen für mehrere Breakpoints haben, etwa grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. Wenn mehrere davon gelten, gewinnt die für den breitesten Bildschirm.
• flex-col md:flex-row stellt Elemente auf einem Smartphone untereinander und ab 768 px nebeneinander.
• hidden md:flex zeigt ein Element erst ab 768 px, und md:hidden nur unterhalb von 768 px.
• Auch Abstände und Textgrößen können sich mit der Breite ändern: py-12 md:py-24, text-4xl md:text-6xl.
• mx-auto max-w-5xl auf dem Element mit dem Inhalt verhindert, dass er sich über einen breiten Bildschirm ausbreitet, während der Hintergrund des Abschnitts weiter die ganze Breite füllt.

Als Nächstes kommt noch ein kleines Projekt: die Website eines Katzencafés, mit Zuständen und einem Layout für jeden Bildschirm. Danach gibst du der Website des Tierheims in der Lektion Dark Mode dunkle Farben für alle, die sie lieber mögen, und einen Button, der zwischen dem hellen und dem dunklen Aussehen wechselt.

Zum Üben haben wir einen neuen Teil der Website vorbereitet: eine größere Fußzeile mit dem Namen, der Adresse und einem Button „Spenden“ des Tierheims. Wie die Startseite am Anfang dieser Lektion ist sie nur für einen Computer gemacht: Auf einem Smartphone sind ihre drei Spalten nebeneinander gequetscht.