# 058: Tilpasset header til galleriet, del 2 (med Reverso Media Queries) - CSS-tricks

Anonim

Vi har det grundlæggende gallerihoved på plads, men det mangler de små blå mennesker, som Erica satte i den originale illustration. Vi havde talt om det på forhånd og besluttede, at det ville være ret sejt, hvis folkens skærmbillede blev ændret, da gallerivæggen bevægede sig bag dem, så det ser ud som om de gennemsøger galleriet i ærefrygt.

Da folks grafik er rent almindelig, er det ikke ideelt at bruge markering til dem. Heldigvis er der to af dem, og vi får to gratis pseudoelementer på hvert element ( ::beforeog ::after). Vi bruger dem til at tilføje dem.

Vi introducerer et koncept i denne video, der fortsat vil være nyttigt, begrebet “reverso media queries”. Vi arbejder stort set desktop-down i dette design, så vores medieforespørgsler er hovedsageligt baseret på max-width. Men hvis vi opretter de samme medieforespørgsler baseret på min-width, kan vi kun målrette mod skærmen, når den er større end en bestemt størrelse, ikke mindre.

Under denne omstændighed passer folks grafik bare ikke på små skærme. Så vi bruger en reverso medieforespørgsel til at indlæse dem, på den måde indlæser vi dem på store skærme, som de arbejder på, men indlæser dem ikke på små skærme. Det er bedre end at indlæse dem hele tiden og gemme dem på små skærme.