Media Queries: le risoluzioni per creare un sito web responsive

Qualche mese fa ho illustrato le potenzialità del responsive web design, oggi entrerò nel dettaglio illustrandovi una lista di risoluzioni valide per chi ha intenzione di realizzare un sito web con design “reattivo” senza l’ausilio di framerowk grafici come twitter bootstrap. Più che un tutorial questo articolo vuole essere un trick per chi volesse iniziare da zero lo sviluppo di una pagina web responsiva.

Risoluzioni da considerare

Per realizzare una pagina web responsiva bisogna basarsi principalmente sulla larghezza del dispositivo:

Esempi CSS

Realizzare un sito web responsive da zero senza considerare tutte le risoluzioni potrebbe risultare problematico, di seguito mostro degli esempi CSS che non devono mai mancare nelle pagine web di chi vuole realizzare un corretto RESPONSIVE LAYOUT:

Smartphones portrait e landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}

Smartphones solo landscape

@media only screen 
and (min-width : 321px) {
}

Smartphones solo portrait

@media only screen 
and (max-width : 320px) {
}

Tablet landscape e portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

Tablet solo landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
}

Tablet solo portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

Desktop e laptop

@media only screen 
and (min-width : 1224px) {
}

Wide screen o risoluzioni superiori

@media only screen 
and (min-width : 1824px) {
}