Comment rendre un site web adaptatif?

En utilisant des grilles flexibles (Flexbox, Grid), des requêtes média pour modifier les styles selon différentes résolutions d'écran, des unités de mesure relatives (%, rem, em, vw, vh) et des images flexibles (max-width: 100%; height: auto;).

/* Requête média pour les écrans jusqu'à 768px de large */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Modifier la navigation en vertical */
  }
}

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

En appliquant ces approches, les éléments de la page s'adapteront automatiquement à différentes tailles d'écran des appareils.