Auf jedem Bildschirm
Zuletzt das Layout für jeden Bildschirm. Die Seite wurde Mobile First gemacht, und wir haben zwei Dinge hinzugefügt, die auf einem Smartphone und auf einem Computer ein unterschiedliches Layout brauchen:
- Die Kopfzeile hat jetzt Links zu den Teilen der Seite und einen Button „Menü“. Auf einem Smartphone ist nur Platz für das Logo und den Button „Menü“. Ab 768 px stehen stattdessen die Links nebeneinander, 24 px voneinander entfernt, und der Button „Menü“ ist weg.
- Am Ende der Seite stehen Fotos der Katzen des Cafés. Sie sind Quadrate, nicht gestaucht, 16 px voneinander entfernt, und zusammen füllen sie die Breite der Seite: zwei in einer Reihe auf einem Smartphone und ab 768 px alle vier in einer Reihe.
Auf einem Smartphone
Ab 768 px
Wechsle in der Leiste Vorschaubreite zwischen 375, 768 und 1280 px, um beide Layouts zu sehen. Die Prüfungen sehen sich das Layout für die Breite an, die die Vorschau hat, wenn du sie ausführst, und sie prüfen, dass deine Klassen es bei einem Breakpoint ändern.
Das ist die ganze Seite. Die Website des Cafés ist gut lesbar, reagiert auf ihre Besucher und funktioniert auf einem Smartphone genauso gut wie auf einem Computer. In der nächsten Lektion, Dark Mode, gibst du einer Website dunkle Farben für alle, die sie lieber mögen.