📱 CSS Media Query: guida completa dalla teoria alla pratica

Le media query sono uno strumento fondamentale del Responsive Web Design, ovvero l'approccio alla creazione di siti web capaci di adattarsi automaticamente a diverse dimensioni di schermo e dispositivi (desktop, tablet, smartphone, TV...).

In questo articolo vedremo:

Cosa sono le media query
Come funzionano
Quali sono i principali tipi di media features
Esempi pratici di utilizzo
Best practices e strumenti utili

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

🧠 Cos’è una media query?

Una media query è una regola CSS che consente di applicare uno stile solo se certi criteri relativi al dispositivo di visualizzazione sono soddisfatti (come larghezza dello schermo, orientamento, risoluzione, ecc.).

La sintassi base è:

@media tipo_dispositivo and (condizione) {
  /* Regole CSS */
}

Ma nella maggior parte dei casi, viene usata così:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

👉 In questo esempio, il colore di sfondo del body diventerà lightblue solo se la larghezza dello schermo è pari o inferiore a 768px.

📐 Perché sono così importanti?

Immagina di navigare un sito progettato solo per desktop dal tuo telefono: testi piccoli, layout fuori scala, esperienza frustrante.

Le media query permettono di personalizzare l’aspetto del sito in base alle dimensioni e caratteristiche del dispositivo, migliorando l’usabilità e l’accessibilità.

🔍 Sintassi dettagliata

@media [not|only] <media-type> and (<media-feature>) {
  /* CSS rules */
}

media-type: tipo di dispositivo (es: screen, print, all)
media-feature: proprietà da verificare (es: min-width, orientation)
not / only: operatori opzionali per controllare l'applicazione

Esempio combinato:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .menu {
    display: block;
  }
}

🔧 Media features più usate

Media Feature	Descrizione	Esempio
`width`, `height`	Larghezza o altezza totale del viewport	`max-width: 600px`
`min-width`	Applica stili da quella larghezza in su	`min-width: 1024px`
`max-width`	Applica stili fino a quella larghezza	`max-width: 768px`
`orientation`	Orientamento (`portrait` o `landscape`)	`orientation: landscape`
`resolution`	Risoluzione del dispositivo (es: per stampa)	`min-resolution: 300dpi`
`prefers-color-scheme`	Rileva il tema scuro/chiaro del sistema operativo	`prefers-color-scheme: dark`

👨‍💻 Esempi pratici

✅ Layout responsive semplice

/* Stili desktop (di default) */
.container {
  width: 800px;
  margin: auto;
}

/* Stili per tablet */
@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

/* Stili per smartphone */
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

🎨 Tema scuro automatico

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
}

📏 Cambiamento di layout in base alla larghezza

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

💡 Best practices

Mobile First: Scrivi i tuoi stili per dispositivi mobili per primi, poi sovrascrivi con media query per schermi più grandi.
```
/* Mobile default */
.nav { display: none; }

/* Desktop */
@media (min-width: 1024px) {
  .nav { display: block; }
}
```
Usa unità relative (em, rem, %) invece di pixel per maggiore flessibilità.
Organizza il codice: puoi scrivere media query accanto ai componenti a cui si riferiscono o separarle in un file dedicato.

🛠️ Strumenti utili

Chrome DevTools – per testare il comportamento responsive con diverse dimensioni di schermo.
Responsively App – simulatore per dispositivi multipli.
Can I Use – per verificare la compatibilità delle media query con i browser.
BrowserStsack - piattaforma completa per il testing multidevice

📚 Conclusione

Le media query sono la spina dorsale del design moderno sul web. Conoscere la loro sintassi e usarle correttamente permette di:

Aumentare l’accessibilità del sito
Migliorare la UX su tutti i dispositivi
Creare layout dinamici, fluidi e professionali

Imparare a progettare con un approccio responsive non è più un'opzione: è uno standard.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog