У нас є основний заголовок галереї, але в ньому бракує маленьких блакитних людей, яких Еріка розмістила на оригінальній ілюстрації. Ми поговорили про це заздалегідь і вирішили, що було б круто, якщо при зміні розміру екрана люди залишаться на місці, коли стіна галереї рухається позаду них, тож виглядає якось так, ніби вони переглядають галерею з трепетом.
Оскільки графічні зображення людей суто орнаментальні, розмітка для них не є ідеальною. На щастя, їх два, і ми отримуємо по два вільні псевдоелементи на кожному елементі ( ::beforeі ::after). Ми використовуємо їх для їх додавання.
У цьому відео ми представляємо концепцію, яка і надалі буде корисною, концепцію „зворотних запитів у медіа”. Ми в основному працюємо над цим робочим столом, тому наші медіа-запити в основному базуються на max-width. Але якщо ми встановлюємо ті самі медіа-запити на основі min-width, ми можемо націлити екран лише тоді, коли він перевищує певний розмір, а не менше.
За цієї обставини графіка людей просто не вміщується на маленьких екранах. Отже, ми використовуємо запит реверсивного медіа для їх завантаження, таким чином ми завантажуємо їх на великі екрани, на яких вони працюють, але не завантажуємо їх на маленькі екрани. Це краще, ніж постійно завантажувати їх і ховати на маленьких екранах.