# 058: Gallerian mukautettu otsikko, osa 2 (Reverso Media -kyselyjen kanssa) - CSS-temppuja

Anonim

Meillä on perusta gallerian otsikossa, mutta siitä puuttuu pienet siniset ihmiset, jotka Erica laittoi alkuperäiseen kuvaan. Olimme puhuneet siitä etukäteen ja päätimme, että olisi aika siistiä, jos kun näytön kokoa muutettaisiin, ihmiset pysyisivät paikallaan, kun gallerian seinä liikkui heidän takanaan, joten näyttää siltä, ​​että he selaavat galleriaa kunnioittaen.

Koska ihmisten grafiikat ovat puhtaasti ornemantaalisia, merkintöjen käyttäminen heille ei ole ihanteellista. Onneksi niitä on kaksi ja saamme kaksi ilmaista pseudoelementtiä jokaiseen elementtiin ( ::beforeja ::after). Käytämme niitä niiden lisäämiseen.

Esittelemme tässä videossa edelleen hyödyllisen konseptin, "Reverso Media Queries" -konseptin. Työskentelemme suurimmaksi osaksi työpöydältä alaspäin tässä suunnittelussa, joten mediakyselymme perustuvat enimmäkseen max-width. Mutta jos asetamme samat mediakyselyt sen perusteella min-width, voimme kohdistaa näytön vain silloin, kun se on suurempi kuin tietty koko, ei pienempi.

Tässä tilanteessa ihmisten grafiikka ei vain sovi pienille näytöille. Joten käytämme reverso-mediakyselyä niiden lataamiseen, jolloin lataamme ne suurille näytöille, joilla ne toimivat, mutta älä lataa niitä pienille näytöille. Se on parempi kuin ladata niitä koko ajan ja piilottaa pienille näytöille.