media-queries-responsive-cover

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.

media-query

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:

ProprietàCosa identifica?
widthLa larghezza esatta dell’area di visualizzazione
heightL’altezza esatta dell’area di visualizzazione
min-widthLa larghezza minima dell’area di visualizzazione
min-heightL’altezza minima dell’area di visualizzazione
max-widthLa larghezza massima dell’area di visualizzazione
max-heightL’altezza massima dell’area di visualizzazione
orientationL’orientamento del dispositivo (landscape o portrait per dispositivi mobili)

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 ) {
}