Bemutatjuk a @medialekérdezések fogalmát a CSS-ben.
Sok minden, amit a Sass használata ebben a projektben lehetővé tesz számunkra, az az, hogy SZÁRAZ maradjon (ne ismételje meg magát). Megtettük a szín- és méretváltozók beállítását. Ezt a betűkészleteinkkel tettük meg. Most média lekérdezésekkel csináljuk újra. Bármikor szükségünk van média lekérdezésre, most megvan a @mixin, amelyet használhatunk. Így, ha módosítanunk kell őket, csak egy helyen változtathatjuk meg őket.
Ahelyett, hogy megneveznénk a médiakérdéseinket, mint például az „iPad” vagy bármi túlzottan konkrét, csak néhány önkényes, de érthető nevet használunk, mint például „Baby Bear” és „Papa Bear”.
Széles képernyővel kezdjük, majd leszűkítjük, amíg a navigáció rosszul néz ki, és ez az első média lekérdezési törés. Ekkor a navigációt két négyes sorra bontjuk egy nyolc helyett. Be kell állítanunk az árnyékokat, hogy jól nézzen ki.
Bizonyos média lekérdezéseknél beállítjuk az oldal burkolatának szélességét is, ami azt jelenti, hogy módosítanunk kell a logó működését is.
