#058: Benutzerdefinierter Header für die Galerie, Teil 2 (mit Reverso Media Queries)

Wir haben den grundlegenden Galerie-Header eingerichtet, aber ihm fehlen die kleinen blauen Leute, die Erica in die ursprüngliche Illustration eingefügt hat. Wir hatten im Voraus darüber gesprochen und beschlossen, dass es ziemlich cool wäre, wenn die Leute beim Ändern der Bildschirmgröße an Ort und Stelle blieben, während sich die Galerie-Wand hinter ihnen bewegte, sodass es so aussieht, als würden sie die Galerie ehrfürchtig durchstöbern.

Da die Grafiken der Leute rein schmückend sind, ist die Verwendung von Markup dafür nicht ideal. Glücklicherweise gibt es zwei davon und wir erhalten zwei kostenlose Pseudo-Elemente für jedes Element (::before und ::after). Wir verwenden diese, um sie hinzuzufügen.

Wir führen in diesem Video ein Konzept ein, das weiterhin nützlich sein wird: das Konzept der „Reverso Media Queries“. Wir arbeiten größtenteils vom Desktop abwärts an diesem Design, daher basieren unsere Media Queries hauptsächlich auf max-width. Aber wenn wir die gleichen Media Queries basierend auf min-width einrichten, können wir den Bildschirm nur dann ansprechen, wenn er größer als eine bestimmte Größe ist, nicht kleiner.

In diesem Fall passen die Grafiken der Leute auf kleinen Bildschirmen einfach nicht. Deshalb verwenden wir eine Reverso Media Query, um sie zu laden. So laden wir sie auf großen Bildschirmen, auf denen sie funktionieren, aber nicht auf kleinen Bildschirmen. Das ist besser, als sie die ganze Zeit zu laden und auf kleinen Bildschirmen zu verstecken.