Il comportamento di tutti i browser è adattare in maniera automatica le dimensioni della area di visualizzazione per posizionare al meglio gli elemento di una pagina web, tuttavia se questo avviene in uno schermo piccolo come quello di smartphone, il testo e le immagini sono talmente piccoli che necessitano di essere zooomate con tap o azioni simili. Usando una semplice pagina di esempio, il browser di un dispositivo mobile può visualizzare la pagina in due modi differenti:

Comportamento di default	Comportamento con viewport

Tale comportamento è dovuto alla importante differenza di risoluzione degli schermi, su uno smartphone può arrivare a 320 px mentre su monitor desktop più essere anche 2000 px. Nel momento in cui si voglia creare un sito adattivo per tutti i dispositivi bisogna evitare effetti grafici indesiderati e studiare il comportamento del viewport. Tecnicamente si può modificare il comportamento di default, spesso indesiderato, inserendo un tag meta nel codice HTML della pagina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

per la gestione del viewport, aggiungendo questo tag alle pagine, i browser dei visitatori non avranno il comportamento indesiderato dello zoom. Maggiori dettagli si possono trovare nel sito ufficiale mozilla.

Le media queries sono una tecnica introdotta con CSS3 per la gestione dei contenuti se questo è visualizzato da dispositivi con differenti dimensioni, prima di questa tecnica era necessario caricare diverse elementi a seconda della dimensione dello schermo del visitatore. La sintassi base è l’uso della parola chiave @media seguita dall’indicazione di quale proprietà selezionare, all’interno delle parentesi graffe si indicano le classi css che devono essere applicate solo ai visitatori che soddisfano la regola:

@media screen and (min-width: 480px) {
.example { background: green; }
}
@media screen and (min-width: 768px) {
.example { background: yellow; }
}
@media screen and (min-width: 1024px) {
.example { background: red; }
}

in questo semplice esempio gli oggetti di classe example avranno sfondo verde nei dispositivi piccoli, giallo nei dispositivi medi e rossi per i dispositivi di grandi dimensioni. E’ possibile usare le media queries anche nel tag link per importare o meno css specifici:

<link rel="stylesheet" media="screen and (color)" href="colore.css" />

I possibili media messi a disposizione da tutti i browser sono:

• all: il CSS si applica a tutti i dispositivi di visualizzazione
• screen: schermo di computer
• print: pagina stampata
• projection: presentazioni e proiezioni
• speech: dispositivi con sintesi vocale
• braille: supporti braille
• embossed: stampanti braille
• handheld: dispositivi mobili con schermo piccolo
• tty: dispositivi a carattere fisso
• tv: visualizzazione su schermi televisivi

E’ possibile inoltre combinare le condizioni e sommarle anche se è una tecnica poso usata in quanto le media queries, come tutte le proprietà CSS, hanno il principio dell’ereditarietà e della sequenzialità: viene sempre applicata l’ultima caratteristica impostata in ordine di caricamento.

BODY{ 
  background: yellow;
}

@media screen and (min-width: 400px) and (max-width: 1024px) { 
  BODY{ 
   background: red;
  }
}

A chi non ha mai usato le media queries si lascia come esempio la possibilità di caricare una pagina con media queries con un browser di un desktop molto largo e poi ridimensionare la finestra, si noterà che le classi cambiano senza il ri-caricamento dell’intera pagina ma le classi sono applicate “run-time”. Questa tecnica è usata spesso anche per mostrare e nascondere elementi a seconda della larghezza della pagina, per esempio nei dispositivi piccoli è possibile nascondere un elemento con:

@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Una guida completa e dettagliata delle Media Queries è disponibile nel sito ufficiale w3schools.