Hoe maak je een website responsief?

Gebruik van flexibele rasterlay-outs (Flexbox, Grid), media queries om stijlen aan te passen aan verschillende schermresoluties, relatieve meeteenheden (%, rem, em, vw, vh) en flexibele afbeeldingen (max-width: 100%; height: auto;).

/* Media query voor schermen tot 768px breed */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Navigatie verticaal maken */
  }
}

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

Door deze benaderingen toe te passen, passen de elementen op de pagina zich automatisch aan verschillende schermformaten van apparaten aan.