# 016: Utilizzo delle media query in Sass - Trucchi CSS

Sommario

Introduciamo il concetto di @mediaquery in CSS.

Molto di ciò che l'utilizzo di Sass in questo progetto ci permette di fare è rimanere ASCIUTTO (non ripetervi). Lo abbiamo fatto impostando le variabili di colore e dimensione. Lo abbiamo fatto con i nostri stack di font. Ora lo stiamo facendo di nuovo con le media query. Ogni volta che abbiamo bisogno di una media query, ora abbiamo un @mixin che possiamo usare. In questo modo, se dobbiamo modificarli, possiamo cambiarli in un solo posto.

Invece di nominare le nostre query multimediali come "iPad" o qualcosa di eccessivamente specifico del genere, useremo solo nomi arbitrari ma comprensibili come "Baby Bear" e "Papa Bear".

Iniziamo con uno schermo ampio, quindi lo restringiamo fino a quando la navigazione non sembra scadente, e questa è la nostra prima interruzione della query multimediale. A quel punto suddividiamo la navigazione in due righe da quattro invece che una riga da otto. Dobbiamo regolare le ombre per farlo sembrare corretto.

Regoliamo anche la larghezza dell'avvolgimento della pagina su determinate query multimediali, il che significa che dobbiamo modificare anche il funzionamento del logo.

Articoli interessanti...