Media queries per responsive layout
I principali step per l'adattamento del proprio sito web ai vari device mobili
// Linguaggio CSS // Trick and Tips
Davide Bausach
/ 29-05-2015
La larga diffusione dei dispositivi mobili e il maggiore utilizzo del web attraverso di essi ha in questi anni necessariamente portato all'esigenza di adattare i layout dei siti web ad un numero ormai enorme di device e schermi di diverse dimensioni.
Fortunatamente ci vengono in aiuto una serie di tecnologie CSS che ci permettono di adattare i nostri layout a tali esigenze.
Le Media Queries sono un modulo di CSS3 che ci permette di adattare i nostri contenitori e contenuti html a diverse dimensioni di schermo, tecnicamente il modulo ci permette di creare codice CSS diverso in funzione della dimensione del device specificata nella regola.
È possibile specificare nelle regole qualsiasi dimensione preferita ma ce ne sono alcune che sono gli step maggiormente utilizzati per essere certi di aderire ad un gran numero di possibilità.
Quelli che io consiglio sono principalmente i seguenti:
Ricordiamoci ancora un altro piccolo accorgimento, quando creiamo dei siti web responsive è opportuno che nel tag head del nostro progetto sia inserito il seguente metatag:
Fortunatamente ci vengono in aiuto una serie di tecnologie CSS che ci permettono di adattare i nostri layout a tali esigenze.
Le Media Queries sono un modulo di CSS3 che ci permette di adattare i nostri contenitori e contenuti html a diverse dimensioni di schermo, tecnicamente il modulo ci permette di creare codice CSS diverso in funzione della dimensione del device specificata nella regola.
È possibile specificare nelle regole qualsiasi dimensione preferita ma ce ne sono alcune che sono gli step maggiormente utilizzati per essere certi di aderire ad un gran numero di possibilità.
Quelli che io consiglio sono principalmente i seguenti:
@media only screen and (max-width: 320px){
}
@media only screen and (max-width: 480px){
}
@media only screen and (max-width: 768px){
}
@media only screen and (max-width: 1024px){
}
@media only screen and (max-width: 1280px){
}
Nello snippet precedente è mostrato come impostare le media queries usando come proprietà max-width, è possibile farlo anche con la proprietà min-width dipende da come si preferisce ragionare nella stesura del css, io personalmente preferisco max-width perché mi permette di associare rapidamente a che device mi sto rivolgendo: ad esempio con max-width: 480px, so che mi rivolgo automaticamente a tutti quei device che arrivano massimo a quella larghezza in px.Ricordiamoci ancora un altro piccolo accorgimento, quando creiamo dei siti web responsive è opportuno che nel tag head del nostro progetto sia inserito il seguente metatag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui, user-scalable=no" />Questo ci permetterà di evitare l'effetto di zoom del sito web da dispositivo mobile attraverso la gesture pinch to zoom.