Nika ilustrācijā galvām bija trīs dažādi slāņi. Tās ir tikai nedaudz atšķirīgas variācijas. Mēs varētu nomainīt attēlus ar animāciju vai ar JavaScript vai kaut ko citu, taču vienmēr darbojošās animācijas (vai pat tādas, kas palaiž katru lappuses slodzi), iespējams, nopietnu forumu lietotājiem būtu ļoti nepatīkami. Tā vietā mēs to padarīsim par Lieldienu olu, tas ir, nelielu funkciju, kuru jūs, iespējams, nepamanīsit, ja vien nejauši nejauši nejauši netīriet.
Ko mēs darīsim, ir nomainīt attēlus, kad pārlūkprogrammas loga izmērs tiek mainīts, izmantojot @media vaicājumus. Tā vietā, lai tikai nedaudzos @media vaicājumos dažas reizes mainītos galvas, mēs izveidosim nelielu @media vaicājumu skaitu, kas tos maina ik pēc pāris pikseļiem. Būtībā novirzot Arley McBlain “Lark Queries” garu.
Mēs izmantojam Sass cilpu, lai izveidotu daudzus nepieciešamos @media vaicājumus. Galu galā:
@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); ) ) )Patīkami ir tas, ka mēs neielādējam šos papildu attēlus, ja vien lapas izmērs netiek mainīts, tāpēc mēs neielādējam papildu lietas tikai Lieldienu olai.