Responsive Design — Cheat Sheet

Tag: css, responsive-design, media-queries, flexbox, grid, mobile-first, frontend

Livello: intermedio

TL;DR: Principi, tecniche e pattern CSS per creare interfacce adattive a qualsiasi viewport, da mobile a schermi desktop ampi.

Concetti chiave

Approccio Mobile-first: definire stili base per schermi ridotti e aggiungere complessita con min-width.

Viewport meta tag obbligatorio in HTML per il corretto rendering e scaling sui dispositivi mobili.

Media Queries CSS per applicare regole in base a larghezza, orientamento e densita pixel dello schermo.

Container Queries (@container) per adattare i componenti allo spazio del loro contenitore anziche al viewport.

Unita relative e fluide: utilizzo di %, vw, vh, rem, ch invece di dimensioni fisse in pixel.

Funzioni matematiche CSS moderne: clamp(), min() e max() per tipografia e spaziature fluide.

Layout moderni flessibili: CSS Flexbox per distribuzioni monodimensionali e CSS Grid per bidimensionali.

Immagini e media responsivi: utilizzo di srcset, <picture> e regola max-width: 100%.

Breakpoint semantici basati sui limiti del contenuto anziche su specifici modelli di dispositivi hardware.

Domande tipiche e risposte pronte

Q: Qual e la differenza principale tra Mobile-first e Desktop-first nello sviluppo CSS?R: Nel mobile-first scrivo il layout di base per schermi piccoli e aggiungo complessita tramite query min-width, riducendo l'override del codice. Con il desktop-first parto dal layout ampio e vado a ritroso usando max-width, spesso sovrascrivendo molte piu proprieta.

Q: Quando preferisci usare Container Queries rispetto alle classiche Media Queries?R: Uso le Container Queries quando creo componenti riutilizzabili e indipendenti che devono cambiare layout in base allo spazio nel genitore, ad esempio se una card compare sia in sidebar che nella colonna centrale.

Q: Come gestisci la tipografia fluida senza moltiplicare le media query?R: Imposto la proprieta font-size con la funzione clamp(min, val, max), combinando un valore minimo, una scala basata su unita viewport (vw/rem) e un tetto massimo.

Insidie e errori comuni

Dimenticare <meta name="viewport" content="width=device-width, initial-scale=1.0">, causando lo zoom automatico errato su mobile.

Utilizzare larghezze fisse in pixel (width: 1200px) provocando overflow orizzontale su schermi piu stretti.

Definire troppi breakpoint legati a risoluzioni hardware specifiche anziche alla rottura naturale del layout.

Non impostare max-width: 100%; height: auto; sugli elementi multimediali (img, video, canvas).

Usare unicamente unita viewport (vw) per il testo, impedendo all'utente di ridimensionare il font tramite le preferenze del browser.

Dimenticare la proprieta box-sizing: border-box, alterando il calcolo effettivo delle larghezze con padding e bordi.

Snippet e comandi

<!-- Meta viewport standard -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS

/* Reset base per immagini e box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

img, picture, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tipografia fluida con clamp */
h1 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

/* Mobile-first Media Query */
.grid-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

@media (min-width: 1024px) {
  .grid-layout {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Da ripassare

[ ] Sintassi e supporto browser delle CSS Container Queries (@container)

[ ] Pattern di layout con grid-template-columns: repeat(auto-fit, minmax(..., 1fr))

[ ] Utilizzo corretto dell'elemento <picture> e dell'attributo sizes in <img>

[x] Regole di base Mobile-first con min-width

[x] Funzioni CSS clamp(), min(), max()

Jarvis Interviews
Jarvis