Mamy podstawowy nagłówek galerii, ale brakuje w nim małych niebieskich ludzików, które Erica umieściła na oryginalnej ilustracji. Rozmawialiśmy o tym wcześniej i zdecydowaliśmy, że byłoby całkiem fajnie, gdyby po zmianie rozmiaru ekranu ludzie pozostali na miejscu, gdy ściana galerii przesuwała się za nimi, więc wygląda na to, że przeglądają galerię w zachwycie.
Ponieważ grafika ludzi jest czysto ornemantalna, używanie do nich znaczników nie jest idealne. Na szczęście są ich dwa i na każdym elemencie ( ::beforei ::after) otrzymujemy dwa darmowe pseudoelementy . Używamy ich, aby je dodać.
W tym filmie przedstawiamy koncepcję, która będzie nadal przydatna - pojęcie „odwróconych zapytań o media”. W tym projekcie pracujemy głównie na komputerach w dół, więc nasze zapytania o media opierają się głównie na max-width. Ale jeśli skonfigurujemy te same zapytania o media na podstawie min-width, możemy kierować reklamy na ekran tylko wtedy, gdy jest większy niż określony rozmiar, a nie mniejszy.
W takiej sytuacji grafiki przedstawiające ludzi po prostu nie mieszczą się na małych ekranach. Więc używamy zapytania zwrotnego o media, aby je załadować, w ten sposób załadujemy je na duże ekrany, na których pracują, ale nie ładujemy ich na małych ekranach. To lepsze niż ciągłe ich ładowanie i ukrywanie na małych ekranach.