Media Query

Prerequisiti: Principi del responsive design e viewport.

Una pagina responsive conserva leggibilità e funzionalità quando cambia lo spazio disponibile. Non consiste soltanto nel rimpicciolire ogni elemento. Un menu può andare a capo, una griglia passare da una a più colonne, le immagini adattarsi al contenitore. Nel documento completo di esempio il meta viewport imposta width=device-width e initial-scale=1, evitando la tipica resa mobile su un viewport virtuale ampio. Non impedire lo zoom dell’utente.

@media aggiunge regole che si applicano solo quando la condizione è vera. Con @media (min-width: 48rem) la regola entra in gioco da quella larghezza del viewport in poi. Le regole dentro la media query partecipano comunque alla cascata: non vincono automaticamente su selettori più specifici. Il breakpoint deve nascere dal punto in cui i contenuti richiedono una diversa disposizione, non da un elenco di modelli di telefono.

Un approccio mobile first scrive inizialmente un layout semplice su una colonna e aggiunge complessità quando lo spazio lo consente. Riduce la necessità di annullare continuamente stili pensati per schermi grandi. Verifica anche dimensioni intermedie e zoom: il responsive deve funzionare fra i breakpoint, non soltanto in due schermate campione. Un simulatore di dispositivo è utile ma non sostituisce completamente prove reali quando la pagina viene pubblicata.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Media query</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="griglia">
<article>Prima lezione</article>
<article>Seconda lezione</article>
<article>Terza lezione</article>
</div>
</body>
</html>

.griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.griglia article { padding: 1rem; border: 1px solid #174a7e; }
@media (min-width: 48rem) {
  .griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

La regola iniziale funziona per tutte le larghezze. La media query sostituisce il numero di colonne quando la condizione è vera, con la stessa specificità.

@media (min-width: 36rem) {
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.