Parlandoti del flexbox ti abbiamo illustrato un concetto fondamentale nella progettazione di un sito web; prima ancora di iniziare a scrivere codice per creare un sito web, infatti, devi curarne la progettazione con minuzia. Per questo abbiamo introdotto, nella scorsa guida, il concetto di progettazione “mobile-first”.
Non te lo ricordi? Tranquillo, lo rispolveriamo velocemente.
Progettare un sito web seguendo i precetti del “mobile-first” significa che la prima cosa da concepire quando strutturi il layout del tuo sito è che questo venga visualizzato dallo schermo di un cellulare. Questo perché, ribadiamo nuovamente, il maggior traffico su di un sito web avviene, ad oggi, da telefono, quindi “da mobile”.
Progetterai, quindi, il tuo layout in primo luogo fruibile da uno schermo più piccolo, e via,via, da schermi di altri dispositivi più grandi, fino a giungere alla visualizzazione da desktop, ovvero da pc.
A questo punto potresti sentirti un pò disorientato: staremo, forse, dicendo che devi scrivere fogli di codice diversi per le diverse dimensioni degli schermi dei dispositivi dai quali si accede al tuo sito web? È follia!
Non scoraggiarti. Esiste un modo più smart per adattare il tuo layout e il tuo codice alle diverse dimensioni di cui sopra. Stiamo parlando delle MEDIA QUERIES.
Che cos è una media query?
Una media query è una parte di codice composta dalla dichiarazione di una tipologia di media, appunto, con la sua dimensione in pixel specificata e di espressioni – a seguire – che accertino la validità delle caratteristiche di quel media.
Difficile? Non dirlo neppure! Osserviamone la sintassi cosicché eventuali dubbi svaniscano.
Media query: la sintassi.
Supponiamo di aver creato il nostro bel layout da mobile.
Per semplificare il concetto all’estremo la caratteristica che prenderemo in analisi sarà il colore di sfondo del nostro sito.
Quindi, da cellulare abbiamo uno sfondo blu. Per gli altri dispositivi, però, per assurdo, siamo ossessionati dall’idea di modificare il colore di questo sfondo e renderlo verde.
Ragioniamo un attimo.
Possiamo considerare “mobile” i dispositivi fino ad un’ampiezza (una width, quindi) di 576px.
Noi vogliamo agire sugli schermi dei dispositivi più grandi di quella larghezza.
Quindi, riprendendo la definizione di cui sopra, il media sul quale agiremo sarà lo schermo del dispositivo. Dovremo, quindi, indicare il tipo di media e le sue dimensioni per far capire al browser come agire.
Ne consegue, che la sintassi sarà la seguente.
Regola principale – da mobile :
.background-color {
background-color: blue;
}
Media query per cambiare il colore di sfondo:
@media screen and (min-width:576px) {
.background-color {
background-color: green;
}
}
Come vedi, abbiamo la dichiarazione della media query, con specificato il tipo di media e l’ampiezza minima (o massima, a seconda di ciò su cui vogliamo agire) seguita dal selettore che ci occorre (qui la classe .background color) a cui modificare gli attributi css desiderati (in questo caso, il colore di sfondo)
Più semplice a farsi che a dirsi, vero?
Le media queries vanno introdotte nel nostro foglio di codice o inserendole alla fine del foglio CSS, per ultime, oppure su un foglio CSS a parte che andremo poi a linkare nell’head del nostro documento html.
Ricorda di inserirle secondo un ordine ben preciso, poiché proprio per il principio dello stile a cascata di cui sopra, un ordine scorretto potrebbe far si che una si sovrascriva ad un’altra, non facendo funzionare le istruzioni che desideri.
Con questo strumento, dunque, potrai modificare il tuo codice in maniera facile e veloce, rendendolo differente da qualsiasi dispositivo tu voglia. Ne cogli la potenza?
Termina qui la nostra guida all’apprendimento di html e css, ma non ti lasciamo solo: potrai esercitarti con i nostri esercizi css!
