Che cosa sono le Media Query?
Le media query sono regole CSS che permettono di applicare stili diversi in base alle caratteristiche del dispositivo. Non sono magia — sono semplicemente istruzioni condizionali per il tuo foglio di stile.
La sintassi base è semplice:
@media (condizione) { ... }
. Dentro le parentesi, scrivi la condizione — potrebbe essere la larghezza dello schermo, l’orientamento del dispositivo, o persino se l’utente ha una connessione veloce.
Qui sta il vero potere: puoi scrivere CSS che si adatta automaticamente. Un bottone grande su desktop diventa più piccolo su mobile. Un layout a tre colonne si trasforma in una singola colonna su smartphone. È tutto nel CSS — niente JavaScript, niente complessità.
Il concetto fondamentale: Una media query è una domanda. “Lo schermo è più stretto di 768px?” Se la risposta è sì, applica questi stili. Se no, ignora il blocco.
Breakpoint: Dove Cambia il Design
Un breakpoint è semplicemente un punto di interruzione — una larghezza di schermo dove decidi che il design deve cambiare. I breakpoint comuni sono: 480px (telefoni piccoli), 768px (tablet), 1024px (desktop), 1440px (schermi grandi).
Non esistono regole fisse. Dipende dal tuo design. Se il tuo layout inizia a sembrare strano a 850px, metti lì un breakpoint. Il responsive design non è scienza — è adattarsi a quello che vedi.
Esempio di media query:
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.sidebar {
display: none;
}
}
Questo codice dice: “Se lo schermo è 768px o più stretto, riduci il padding e nascondi la sidebar”. Semplice e diretto.
Mobile-First vs Desktop-First
Ci sono due approcci filosofici. Desktop-first significa che scrivi il CSS per il desktop, poi aggiungi media query per ridurlo su mobile. Mobile-first è l’opposto: scrivi per mobile per primo, poi espandi il design per schermi più grandi.
Mobile-first è quasi sempre migliore. Ecco perché: quando cominci dal mobile, sei costretto a semplificare. Non puoi avere tre sidebar e dieci menu. Devi pensare all’essenziale. Poi, quando espandi per desktop, aggiungi la complessità solo dove ha senso.
Inoltre, i dispositivi mobili caricano meno CSS. Se usi desktop-first, il mobile scarica regole CSS che non usa mai. Uno spreco di banda.
Approccio Mobile-First:
- Scrivi CSS base per mobile (schermo stretto)
-
Aggiungi media query con
min-width - Espandi il design man mano che lo schermo cresce
- Testa su dispositivi reali a ogni breakpoint
Media Query Pratiche: Esempi Reali
Vediamo quattro casi d’uso comuni. Primo: il layout a griglia. Su desktop, 3 colonne. Su tablet, 2 colonne. Su mobile, 1 colonna. Questa è la forma più comune di responsive design.
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
Secondo caso: nascondi elementi. Su mobile non serve il menu laterale. Usa
display: none
per nasconderlo, e
display: block
per mostrarlo su desktop.
Terzo: font-size responsivo. I titoli su mobile devono essere più piccoli. Su desktop possono essere più grandi. Non usare media query fisse — usa
clamp()
per scalare il font automaticamente.
Quarto: spacing e padding. Lo spazio bianco su mobile è prezioso. Riduci padding e margin su schermi piccoli. Aumentali su desktop per un respiro visivo migliore.
Errori Comuni da Evitare
Primo errore: troppe media query. Ogni breakpoint che aggiungi complica il CSS. Non mettere media query a 480px, 550px, 620px, 768px, 850px, 1024px. Bastano tre o quattro breakpoint ben scelti. Scegli le larghezze dove il design effettivamente si rompe.
Errore comune:
Media query solo su max-width. Se usi solo
max-width: 768px
, il tuo CSS potrebbe non funzionare come previsto. Combina
min-width
e
max-width
per essere più preciso.
Secondo: non testare su dispositivi reali. Un browser desktop con la finestra ristretta non è la stessa cosa di un vero smartphone. Testa su dispositivi veri. Scoprirai problemi che il browser desktop non mostra.
Terzo: ignorare il touch. Su mobile, gli utenti usano il dito. I bottoni devono essere abbastanza grandi per toccare — almeno 44px per 44px. Aumenta la dimensione dei bottoni su mobile con una media query.
Quarto: usare unità fisse. Pixel fissi non scalano. Usa percentuali, rem, o clamp() per fare in modo che il layout si adatti naturalmente.
Conclusione: Inizia Oggi
Le media query non sono difficili. Sono solo domande che fai al browser. “Lo schermo è stretto? Allora fai questo. Lo schermo è largo? Allora fai quello.” È tutto.
La prossima volta che disegni un sito, ricorda: cominci da mobile. Scrivi il CSS base per il telefono. Poi aggiungi breakpoint a 768px e 1024px. Testa. Ajusta. Finito. Non è scienza missilistica — è adattamento intelligente.
Hai già usato le media query nel tuo ultimo progetto? Quali breakpoint hai scelto? Provare approcci diversi è il modo migliore per capire cosa funziona per te.
Approfondisci il Design Responsivo
Scopri come le griglie fluide e le immagini flessibili completano le media query.
Leggi la Guida alle Griglie FluideNota Importante
Le informazioni fornite in questo articolo hanno scopo educativo. Gli standard CSS e le migliori pratiche di responsive design evolvono costantemente. Ti consigliamo di consultare la documentazione ufficiale di MDN Web Docs e W3C per i dettagli tecnici più aggiornati. Il codice negli esempi è semplificato per chiarezza didattica e potrebbe richiedere adattamenti per ambienti di produzione specifici.
