Quali approcci conosci per creare un design adattivo…

Media Queries: Utilizzo delle regole CSS @media per applicare stili in base alle caratteristiche del dispositivo (larghezza, altezza dello schermo, orientamento, ecc.).
```
/* Esempio di Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Layout a griglia flessibile (Flexible Grid Layout): Creazione di layout utilizzando unità relative (%, vw, vh) e proprietà flessibili (flex, grid).

/* Esempio di Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Permette agli elementi di passare a una nuova riga */
}

.child {
  flex: 1 1 200px; /* Permette all’elemento di espandersi, comprimersi e avere una larghezza di base */
}

Immagini e media flessibili: Uso delle proprietà CSS max-width affinché immagini e altri media si ridimensionino proporzionalmente.

/* Esempio di immagine flessibile */
img {
  max-width: 100%; /* L’immagine non supererà la larghezza del contenitore genitore */
  height: auto;    /* Mantiene le proporzioni */
}

Mobile-First vs. Desktop-First:
- Mobile-First: Lo stile viene sviluppato prima per dispositivi mobili e poi ampliato per schermi più grandi usando min-width nelle Media Queries. È considerata una buona pratica, poiché semplifica lo stile per le risorse limitate dei dispositivi mobili e migliora le prestazioni.
- Desktop-First: Lo stile viene sviluppato prima per desktop e poi ridotto per schermi piccoli usando max-width nelle Media Queries.
Rilevamento delle caratteristiche (Feature Detection): Uso di JavaScript per determinare le capacità del browser o del dispositivo (ad esempio, supporto all’interfaccia touch) e applicare stili o funzionalità appropriati. Strumenti come Modernizr possono aiutare.
Tipografia reattiva: Modifica delle dimensioni del carattere e dell’altezza della riga in base alle dimensioni dello schermo, spesso usando unità relative (em, rem, vw) e Media Queries.
```
/* Esempio di tipografia reattiva */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Rilevamento lato server: Identificazione del tipo di dispositivo o browser sul server e invio della versione appropriata della pagina o degli stili. È un approccio meno diffuso nello sviluppo frontend moderno.

Quali approcci conosci per creare un design adattivo?