Wir haben den grundlegenden Galerie-Header installiert, aber es fehlen die kleinen blauen Leute, die Erica in die Originalillustration eingefügt hat. Wir hatten im Voraus darüber gesprochen und beschlossen, dass es ziemlich cool wäre, wenn die Größe des Bildschirms bei einer Größenänderung des Bildschirms beibehalten würde, wenn sich die Galeriewand hinter ihnen bewegte. Es sieht also so aus, als würden sie voller Ehrfurcht in der Galerie stöbern.
Da die People-Grafiken rein ornemantal sind, ist die Verwendung von Markups für sie nicht ideal. Glücklicherweise gibt es zwei davon und wir erhalten zwei freie Pseudoelemente für jedes Element ( ::beforeund ::after). Wir verwenden diese, um sie hinzuzufügen.
In diesem Video stellen wir ein Konzept vor, das weiterhin nützlich sein wird, das Konzept der „Reverse-Media-Abfragen“. Wir arbeiten größtenteils an Desktop-Down in diesem Design, daher basieren unsere Medienabfragen hauptsächlich auf max-width. Wenn wir jedoch dieselben Medienabfragen basierend auf einrichten min-width, können wir den Bildschirm nur dann ausrichten, wenn er größer als eine bestimmte Größe und nicht kleiner ist.
Unter diesen Umständen passen die Personengrafiken einfach nicht auf kleine Bildschirme. Daher verwenden wir eine Reverse-Media-Abfrage, um sie zu laden. Auf diese Weise laden wir sie auf große Bildschirme, auf denen sie arbeiten, aber nicht auf kleine Bildschirme. Das ist besser, als sie ständig zu laden und auf kleinen Bildschirmen zu verstecken.