У нас есть основной заголовок галереи, но в нем отсутствуют маленькие синие человечки, которые Эрика поместила на исходную иллюстрацию. Мы говорили об этом заранее и решили, что было бы неплохо, если бы при изменении размера экрана люди оставались на месте, пока стена галереи двигалась за ними, так что похоже, что они просматривают галерею с трепетом.
Поскольку графика людей чисто орнемантальна, использование разметки для них не идеально. К счастью, их два, и мы получаем два бесплатных псевдоэлемента для каждого элемента ( ::beforeи ::after). Мы используем их, чтобы добавить их.
В этом видео мы представляем концепцию, которая будет по-прежнему полезна, концепцию «медиа-запросов Reverso». В этом дизайне мы в основном работаем с десктопом, поэтому наши медиа-запросы основаны в основном на max-width. Но если мы настроим те же медиа-запросы на основе min-width, мы сможем настроить таргетинг на экран только тогда, когда он больше определенного размера, а не меньше.
В этом случае графика людей просто не помещается на маленьких экранах. Итак, мы используем медиа-запрос Reverso для их загрузки, таким образом мы загружаем их на большие экраны, на которых они работают, но не загружаем их на маленькие. Это лучше, чем загружать их все время и скрывать на маленьких экранах.