Responsive Design e Mobile-First

Aggiornato maggio 2026 · 8 min di lettura

Il 60% del traffico web arriva da dispositivi mobili. Progettare in mobile-first non è una scelta stilistica: è una strategia tecnica che produce siti più veloci, più usabili e meglio posizionati.

L’approccio mobile-first

Mobile-first significa scrivere il CSS base per schermi piccoli e usare media query per aggiungere complessità agli schermi più grandi. Il vantaggio concreto: il browser non deve scaricare e poi ignorare regole CSS per desktop che non usa mai su mobile.

/* base: mobile */
.card-grid { display: flex; flex-direction: column; gap: 1rem; }

/* espandi per schermi più grandi */
@media (min-width: 640px) {
  .card-grid { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

Media query e breakpoint

Tre breakpoint coprono il 95% dei casi reali:

• 640px — smartphone landscape e schermi piccoli
• 768px — tablet
• 1024px — desktop standard

Usare sempre min-width (mobile-first), non max-width (desktop-first). La logica si legge più naturalmente dal basso verso l’alto.

Unità fluide

Evitare pixel fissi per tipografia e layout. Le unità relative si adattano senza media query aggiuntive:

• rem — per tipografia e spaziature (relativa al font-size radice)
• %, vw, vh — per larghezze e altezze fluide
• clamp(min, val, max) — tipografia fluida senza media query: clamp(1rem, 2.5vw, 1.5rem)

Container Queries

Le container query, con supporto universale dal 2023, permettono di stilare un componente in base alle dimensioni del suo contenitore, non della finestra del browser. Fondamentali per design system e componenti riutilizzabili.

.card-wrapper { container-type: inline-size; }

@container (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
}

Test pratico

Chrome DevTools → Toggle device toolbar copre la maggior parte dei casi. Completare con test su dispositivi reali, in particolare iPhone e Android di fascia media, dove le performance sono molto diverse rispetto all’emulatore.

Un layout che funziona bene su mobile spesso funziona meglio anche su desktop: i vincoli piccoli costringono a soluzioni più chiare.

Per i layout bidimensionali del desktop, la guida a CSS Grid e Flexbox completa le tecniche responsive con strutture più complesse. L’ottimizzazione delle immagini per mobile è il primo passo nella guida alle performance web.