Corsi on-line

Media Queries per smartphone generici

Le Media Queries sono delle componenti di CSS grazie alle quali è possibile definire delle regole di stile sulla base di specifiche caratteristiche del browser per la navigazione Internet o del dispositivo utilizzato come per esempio l’orientamento del device di riferimento. In linea generale abbiamo due tipologie di orientamento: “portrait” (ritratto), dispositivo posto in verticale, e “landscape“, dispositivo posto in orizzontale.

Una Media Query che consideri entrambi gli orientamenti potrebbe essere la seguente:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* regole di stile */
}

Per l’orientamento “portrait” potremmo avere invece:

@media only screen
and (max-width : 320px) {
/* regole di stile */
}

Infine, ecco come definire una Media Query per l’orientamento “landscape“:

@media only screen
and (min-width : 480px) {
/* regole di stile */
}

In un prossimo articolo affronteremo lo stesso argomento dedicandoci però alle Media Queries per Tablet Pc.

Post correlati
I più letti del mese
Tematiche