# 060: Glava po meri za forume, 2. del (hitre medijske poizvedbe) - CSS-triki

Anonim

Nickova ilustracija je imela tri različne plasti za glave. Gre le za nekoliko drugačne različice. Slike bi lahko zamenjali z animacijo ali z JavaScriptom ali čem podobnim, vendar bi imela vedno aktivna animacija (ali celo tista, ki zažene vsako nalaganje strani) za močne uporabnike foruma verjetno zelo moteča. Namesto tega bomo naredili velikonočno jajce, to je majhno značilnost, ki je morda ne boste opazili, če slučajno slučajno ne naletite nanjo.

Kar bomo storili, je zamenjati slike, ko se okno brskalnika spremeni po poizvedbah @media. Namesto le nekaj poizvedb @media, ki bi nekajkrat spremenile glave, bomo naredili obsežne poizvedbe @media, ki jih bodo spremenili vsakih nekaj slikovnih pik. V bistvu usmerja duh "Lark Queries" Arleyja McBlaina.

Z zanko Sass ustvarimo številne poizvedbe @media, ki jih potrebujemo. Končno:

@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )

Pri tem je lepo, da teh dodatnih slik ne naložimo, razen če se stran spremeni, tako da ne nalagamo dodatnih stvari samo za velikonočno jajce.