Definire il tipo di media

Quando inseriamo nel tag <head> dell'HTML il link al foglio di stile possiamo specificare per quale dispositivo sono valide le regole contenute in quel foglio. I dispositivi più diffusi sono: all per tutti i dispositivi, screen per computer, tablet e telefoni, print per la stampa, aural per gli screen readers. Nell'esempio viene definito un foglio di stile per visualizzare la pagina su uno schermo ed un altro foglio di stile per quando la stampiamo, dove possiamo decidere, per esempio, di eliminare gli elementi decorativi ed i colori per risparmiare inchiostro.

<link rel="stylesheet" type="text/css" media="screen" href="foglio-principale.css">
<link rel="stylesheet" type="text/css" media="print" href="foglio-per-stampa.css">

E' anche possibile usare un solo foglio di stile ed al suo interno specificare le regole per i diversi media utilizzando la parola chiave @media. Le regole definite nell'esempio dentro le parentesi graffe si applicheranno alla pagina solo quando questa verrà stampata.

@media screen {
    body {
        background-color: white;
        }
}

Definire le dimensioni dello schermo

Per definire delle regole diverse in base alla grandezza dello schermo possiamo inserire nel foglio di stile la parola chiave @media, seguita dalle dimensioni massime o minime a cui volgiamo che si applichino le regole. Possiamo sia riferirci alla grandezza della finestra del browser (width) sia alla grandezza del dispositivo (device-width).

@media screen and (min-width: 400px) and (max-width: 700px) {
	regole che vogliamo applicare quando la grandezza della finestra del browser è compresa tra 400px e 700px
}

Dato che cellulari e tablet hanno diversa grandezza in base all'orientamento dello schermo possiamo usare la parola chiave orientation: portrait (verticale) e landscape (orizzontale).

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
    regole che vogliamo applicare ad un dispositivo che in verticale ha una grandezza compresa tra 320 e 480 pixel
}

Le grandezze che definiamo come minime e massime sono dette breakpoint. Queste grandezze possiamo deciderle in base alle dimensioni dei più diffusi dispositivi oppure, ed è preferibile, possiamo ingrandire e rimpicciolire la finestra del browser e vedere a quali grandezze la pagina non è più visualizzata correttamente.

Quando scegliamo i breakpoints dobbiamo fare in modo che due queries con proprietà contrastanti non siano vere allo stesso tempo. Nel caso capitasse la proprietà successiva sovrascrive la precedente come al solito.

Nell'esempio, quando la finestra del browser è, ad esempio, 650px, sia la prima query che la seconda sono valide, lo sfondo sarà rosso.

@media screen and (max-width: 700px) {
	body {
	background-color: green;
    }
}
@media screen and (min-width: 600px) {
	body {
	background-color: red;
    }
}