# 058: Pielāgota galvenes galerija, 2. daļa (ar Reverso Media vaicājumiem) CSS-triki

Anonim

Mums ir galvenā galerijas galvene, taču tajā trūkst mazo zilo cilvēku, ko Ērika ievietoja oriģinālajā ilustrācijā. Mēs jau iepriekš par to runājām un nolēmām, ka būtu diezgan forši, ja ekrāna izmēru mainot cilvēki paliks uz vietas, kad galerijas siena pārvietojās aiz viņiem, tāpēc izskatās, ka viņi ar bijību pārlūko galeriju.

Tā kā cilvēku grafika ir tīri ornemantāla, marķējuma izmantošana viņiem nav ideāla. Par laimi ir divi no tiem, un mēs iegūstam divus bezmaksas pseido elementus katram elementam ( ::beforeun ::after). Mēs tos izmantojam, lai tos pievienotu.

Šajā videoklipā mēs ieviešam jēdzienu, kas arī turpmāk būs noderīgs, jēdzienu “reverso mediju vaicājumi”. Šajā dizainā mēs lielākoties strādājam uz darbvirsmas, tāpēc mūsu multivides vaicājumi galvenokārt balstās uz max-width. Bet, ja mēs izveidojam tos pašus multivides vaicājumus, pamatojoties uz to min-width, ekrānu var atlasīt tikai tad, kad tas ir lielāks par noteiktu izmēru, nevis mazāks.

Šajā gadījumā cilvēku grafika vienkārši neiederas mazos ekrānos. Tāpēc mēs to ielādēšanai izmantojam reverso multivides vaicājumu, tādā veidā mēs tos ielādēsim lielos ekrānos, kuros tie darbojas, bet neuzlādēsim tos mazos ekrānos. Tas ir labāk nekā tos visu laiku ielādēt un paslēpt mazos ekrānos.