# 058: Vlastná hlavička pre Galériu, časť 2 (s požiadavkami na médiá Reverso) - Triky CSS

Anonim

Máme umiestnenú základnú hlavičku galérie, ale chýbajú jej malí modrí ľudia, ktorých Erica vložila do pôvodnej ilustrácie. Hovorili sme o tom vopred a rozhodli sme sa, že by bolo celkom fajn, keby ľudia pri zmene veľkosti obrazovky zostali stáť, keď sa za nimi pohybovala stena galérie, takže to vyzerá, akoby prechádzali galériu s úžasom.

Pretože grafika ľudí je čisto ornemantická, použitie značiek pre ne nie je ideálne. Našťastie existujú dva z nich a na každý prvok ( ::beforea ::after) dostaneme dva bezplatné pseudo prvky . Pomocou nich ich pridáme.

V tomto videu predstavujeme koncept, ktorý bude naďalej užitočný, koncept „mediálnych požiadaviek na reverz“. V tomto dizajne do veľkej miery pracujeme na zostupnej ploche, takže naše mediálne dotazy sú väčšinou založené na max-width. Ak ale nastavíme rovnaké dotazy na médiá min-width, môžeme na obrazovku zacieliť iba vtedy, ak je väčšia ako určitá veľkosť, nie menšia.

Za týchto okolností sa ľudská grafika na malé obrazovky jednoducho nezmestí. Na ich načítanie teda používame spätný dotaz na médiá. Takto ich načítame na veľké obrazovky, na ktorých pracujú, ale nenačítame ich na malých obrazovkách. To je lepšie, ako ich neustále načítavať a skrývať na malých obrazovkách.