Design Responsive

Costruire pagine che si adattano da telefono a desktop senza versioni separate.

Foundation 25 minuti Prerequisiti: Layout: Flexbox e Grid

Idee chiave

Mobile-first: scrivi prima il CSS per schermo stretto, poi aggiungi media queries per schermi più larghi.
Unità relative: rem, %, vw/vh invece di pixel fissi.
Immagini fluide: max-width: 100%; height: auto.
Breakpoints: pochi (es. 640, 1024, 1280) basati sul contenuto, non sui device.

.card { padding: 12px; }
@media (min-width: 640px) {
  .card { padding: 24px; }
}