Media query e adattare layout alle varie risoluzioni

Non e’ un segreto e neppure una sorpresa che la varieta’ in cui le persone navigano nel web e’ in costante aumento. Le persone possono visualizzare le nostre pagine web su TV, computer desktop, netbook, cellulari e tablet. Non possiamo creare un sito che abbia lo stesso aspetto su tutti i dispositivi in ogni dimensione di schermo e di testo, ma possiamo creare un sito che si adatti alle impostazioni dell’utente in modo da avere un aspetto e un funzionamento corretti nello spazio disponibile sullo schermo.

In questo articolo vogliamo imparare ad utilizzare Media query di CSS3 per adattare la progettazione di una pagina web a varie dimensione di schermo istantaneamente, rendendo le nostre pagine web piu’ dinamiche, utilizzabili e reattive.

Cosa sono le media query?

Le media query permettono di personalizzare gli stili in base alle caratteristiche del dispositivo o dello schermo dell’utente, come la larghezza del viewport, la modalita’ verticale o orizzontale, la visualizzazione o meno del colore. Con le media query, specifichiamo non solo il tipo di supporto a cui si desidera applicare un gruppo di stile, ma anche una o piu’ caratteristiche dello schermo dell’utente. Ecco un esempio:

@media screen and (max-width: 600px){

body{

font-size: 88%;

}

#content-main{

float: none;

width: 100%;

}

}

La media query sopra inizia con la regola @media e poi specifica un media type, che in questo caso e’ screen. Poi c’e’ la parola and, seguita dalla caratteristica con cui cerchiamo la corrispondenza; max-width: 600px, dice al browser che gli stili per questa media query dovrebbero essere applicate soltanto fino alla larghezza massima di 600 pixel. Se la larghezza del viewport e’ superiore ai 600 px, il browser ignora gli stili all’interno della media query.

Le media query possono essere inserite direttamente nel foglio di stile principale o a fogli di stile separati con questo semplice codice:

@import url(stile2.css ) only screen and (max-width:600px);

Che siano incorporate con un altro CSS o in fogli di stile separati, le media query sono uno strumento nuovo del web design. Possiamo utilizzarle per personalizzare e perfezionare i nostri stili in base al dispositivo e alle impostazioni di ogni utente con maggiore precisione di quanto potevamo fare prima dei CSS3. Questo puo’ migliorare la bellezza delle nostre pagine web e la loro usabilita’.

Alla prossima!