Non possiamo immaginare lo sviluppo web moderno senza design adattivi/responsivi. Questo consente agli utenti di utilizzare le risorse web in modo equivalente su qualsiasi dispositivo: uno smartphone, un tablet, un desktop o una TV.

Come funziona?

1. Il team di sviluppo definisce l'aspetto di ogni elemento in base alla dimensione dello schermo;
2. Imposta le istruzioni necessarie nel codice;
3. Il browser monitora le modifiche della viewport;
4. Il browser applica le regole definite dal team di sviluppo sotto forma di codice.

Media-query

Media-query è ciò che rende possibili i design adattivi/responsivi. Con l'aiuto di queste query, gli sviluppatori possono impostare gli stili di qualsiasi elemento in base alla dimensione dello schermo.

Nota

Possiamo considerare la media-query come istruzioni: "Se lo schermo dell'utente è un desktop, applica tali stili all'elemento. Se lo schermo dell'utente è uno smartphone, applica altri stili all'elemento. E così via.".

La sintassi di base della media-query è la seguente:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - dichiara il tipo di dispositivo. Valori possibili:
   • all - valore predefinito. Se non viene specificato nulla, la regola media funziona per tutti i dispositivi;
   • print - la regola media funziona per i dispositivi che producono documenti stampati, come le stampanti;
   • screen - la regola media funziona per tutti i dispositivi con schermo fisico.
2. <media_feature> - dichiara le caratteristiche del dispositivo. Utilizzo più comune:
   • min-width: - la larghezza minima della viewport;
   • max-width: - la larghezza massima della viewport.
3. <operator> - media-type e media-feature sono separati dall'operatore logico opzionale. I suoi valori possono essere: and oppure ,.

Nota

Nei capitoli successivi, verrà considerato l'utilizzo pratico delle media-query.