Media query

Approccio mobile-first

Con l’approccio mobile-first scrivi prima gli stili per schermi piccoli (layout a colonna, touch target ampi), poi aggiungi regole con @media (min-width: …) quando c’è spazio per colonne multiple o sidebar. Eviti di sovrascrivere decine di regole desktop con max-width, pattern tipico dei siti legacy difficili da mantenere.

Breakpoint tipici

Non serve un breakpoint per ogni modello di telefono: scegli 2–3 soglie legate al layout, non ai device. Esempi comuni: ~48rem (768px) per tablet, ~64rem (1024px) per desktop. Preferisci rem ai pixel così rispetti zoom e preferenze root font-size.

Evita breakpoint «magici» copiati da framework se il tuo design cambia struttura a larghezze diverse: osserva dove il contenuto «si rompe» e metti lì la query.

Esempio griglia

Griglia che passa da una colonna a due e tre senza duplicare selettori.

.grid {
  display: grid;
  gap: var(--space-md, 1rem);
  grid-template-columns: 1fr;
}

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

@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Container e fluidità

Combina media query con max-width sul container e padding laterale fluido (clamp). Query come prefers-reduced-motion e prefers-color-scheme non sono larghezza ma fanno parte del responsive design inclusivo. Testa rotazione tablet e split screen su desktop.

Query oltre la larghezza

prefers-reduced-motion: reduce disattiva animazioni non essenziali. prefers-color-scheme: dark scatena override token. orientation: landscape su tablet può riorganizzare hero. Non concatenare troppe query: leggibilità del CSS cala. Container queries (@container) permettono breakpoint basati sul contenitore card invece che sul viewport — utili in sidebar stretta con componenti riusati.

Testa anche hover: none per dispositivi touch: stati hover-only non devono nascondere informazioni.

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Media query con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Desktop-first con troppi override max-width.
• Breakpoint legati a modelli iPhone specifici.
• Nascondere contenuto importante solo su mobile con display:none.
• Font fissi in px che non scalano con le preferenze utente.
• Immagini wider del viewport senza max-width: 100%.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

In breve

• Mobile-first con min-width.
• Pochi breakpoint legati al layout.
• rem, clamp e container fluidi.
• Test stretto, tablet, zoom 200%.