Como tornar um site responsivo?

Utilizando grelhas flexíveis (Flexbox, Grid), consultas de media para alterar estilos em diferentes resoluções de ecrã, unidades de medida relativas (%, rem, em, vw, vh) e imagens flexíveis (max-width: 100%; height: auto;).

/* Consulta de media para telas com até 768px de largura */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Alterar a navegação para vertical */
  }
}

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

Ao aplicar essas abordagens, os elementos da página irão ajustar-se automaticamente a diferentes tamanhos de ecrã dos dispositivos.