Media queries e Responsive Design

Buongiorno ragazzi, ormai è da un bel po' di tempo che utilizziamo le "media queries", messe a disposizione dal nostro amato css3, per rendere "responsive" i nostri siti web, ossia, adattabili ai dispositivi mobili.

Oggi andramo ad analizzare le loro proprietà, ed a fine post, vi lascerò il codice, delle 3 media queries più note, che potrete utilizzare nei vostri progetti.

Utilizzo delle Media Queries nel CSS

Possono essere di più tipi e sono composte principalmente da due elementi, il media-type e il media-features che vengono utilizzati in più combinazioni a seconda della funzione e del risultato che si vuole ottenere.

Proprietà del "media-type"

Il media-type indica la categoria di un dispositivo che, se non viene espressamente indicata, verrà usata la corrispondenza più generica possibile.

1. all
   1. Identifica tutti i dispositivi.
2. print
   1. È destinata alla modalità di stampa, quindi modificherà un documento o una pagina nella sua versione stampabile.
3. screen
   1. Per gli schermi, i tablet o gli smartphone.
4. speech
   1. Dedicata ai sintetizzatori vocali o per gli screen reader che leggono la pagina ad alta voce.

Proprietà del "media-features"

Le media-features sono dichiarazioni utilizzate nelle Media Queries che consentono di intercettare particolari “stati” o caratteristiche del dispositivo utilizzato.

L’elenco completo stilato dal W3C ne riporta tantissime, ma nella seguente tabella, vedremo le più utilizzate:

La modalità di utilizzo, che può andare bene nella maggior parte dei casi, ha lo scopo di manipolare la visibilità o lo stile degli elementi basandosi sulla larghezza massima (max-width) del dispositivo.

@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }

Operatori logici

Gli operatori logici sono utilizzati per strutturare una Media Queries che rispetta più di una condizione alla volta e sono i seguenti:

1. and
   1. Combina più condizioni che devono essere rispettate nello stesso momento
2. not
   1. Per creare una regola di esclusione (è necessario indicare il media-type)
3. only
   1. Applica le regole solo se esiste una corrispondenza diretta (è necessario indicare il media-type)
4. , (virgola)
   1. È utilizzata per combinare più Media Queries in un’unica regola; ogni dichiarazione, separata dalla virgola, verrà analizzata singolarmente (quindi basta che una delle condizioni sia vera)

/* Tablet in modalità orizzontale */
@media all and (min-width: 737px) and (max-width: 1279px) { ... }

/* Tablet in modalità verticale */
@media all and (min-width: 481px) and (max-width: 736px) { ... }

/* Smartphone o piccoli Tablet */
@media all and (max-width: 480px) { ... } 

Benissimo, abbiamo dato una piccola infarinatura di quelle che sono le media queries, ora non vi resta che utilizzarle.

La parola d'ordine è sperimentare, sperimentare e sperimentare; create dei progetti test, e mettete in pratica queste regole, che la teoria da sola non basta.

Spero che questo articolo vi sia piaciuto, ci aggiorniamo venerdì con "Il tutorial di Visual Art"

Ecco a voi le 3 media queries più utilizzate, che potrete subito includere nei vostri progetti:

/* ---------------------------------------------------------------- */
/* General*/
/* ---------------------------------------------------------------- */


/* ---------------------------------------------------------------- */
/* Tablet */
/* ---------------------------------------------------------------- */

@media (max-width: 998px ) {
}


/* ---------------------------------------------------------------- */
/* Smartphone */
/* ---------------------------------------------------------------- */

@media (max-width: 767px ) {
}