Come rendere un sito web adattivo?

Utilizzando griglie flessibili (Flexbox, Grid), media query per modificare gli stili a diverse risoluzioni dello schermo, unità di misura relative (%, rem, em, vw, vh) e immagini flessibili (max-width: 100%; height: auto;).

/* Media query per schermi fino a 768px di larghezza */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Cambia la navigazione in verticale */
  }
}

<img src="image.jpg" alt="Immagine adattiva" style="max-width: 100%; height: auto;">

Applicando questi approcci, gli elementi della pagina si adatteranno automaticamente a diverse dimensioni dello schermo dei dispositivi.