Come funzionano le media query nello sviluppo web per…

Le media query consentono di applicare stili CSS specifici in base alle caratteristiche del dispositivo o dell'area di visualizzazione. Sono utilizzati per creare un design reattivo che viene visualizzato correttamente su diversi schermi, inclusi dispositivi mobili, tablet e desktop.

Sintassi principale della media query:

@media <tipo_di_media> and (<espressione>) {
  /* regole CSS */
}

<tipo_di_media> determina a quale tipo di dispositivo si applica la query (ad esempio, screen, print, all).
<espressione> definisce le condizioni sotto le quali vengono applicati gli stili (ad esempio, larghezza, altezza, orientamento dello schermo, risoluzione).

Espressioni popolari per il design reattivo:

min-width: Gli stili si applicano se la larghezza dell'area di visualizzazione è uguale o superiore al valore specificato.
max-width: Gli stili si applicano se la larghezza dell'area di visualizzazione è uguale o inferiore al valore specificato.
orientation: Gli stili si applicano in base all'orientamento dello schermo (portrait o landscape).
resolution: Gli stili si applicano in base alla risoluzione dello schermo.

Esempio di utilizzo di max-width per lo stile su dispositivi mobili:

/* Stili di default */
body {
  font-size: 16px;
}

/* Stili per schermi fino a 768px di larghezza (tipico per dispositivi mobili) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Esempio di utilizzo di min-width per lo stile su desktop (approccio "mobile first"):

/* Stili di default per mobile */
.column {
  width: 100%;
}

/* Stili per schermi con larghezza a partire da 992px (tipico per desktop) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinazione di espressioni con operatori and, or (nelle media query, or si scrive con la virgola) e not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Stili solo per tablet */
}

@media screen and (orientation: landscape), print {
  /* Stili per orientamento landscape e per stampa */
}

La meta-tag viewport è importante per il corretto funzionamento delle media query sui dispositivi mobili:

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

width=device-width imposta la larghezza dell'area di visualizzazione uguale alla larghezza del dispositivo.
initial-scale=1.0 imposta il livello di zoom iniziale.

Senza questa meta-tag, molti browser mobili scalano la pagina di default, ignorando la reale larghezza del dispositivo, compromettendo la reattività.

Come funzionano le media query nello sviluppo web per il layout reattivo, inclusi i dispositivi mobili?