¿Cómo hacer que un sitio web sea adaptable?

Utilizando rejillas flexibles (Flexbox, Grid), consultas de medios para cambiar estilos en diferentes resoluciones de pantalla, unidades de medida relativas (%, rem, em, vw, vh) y imágenes flexibles (max-width: 100%; height: auto;).

/* Consulta de medios para pantallas con un ancho de hasta 768px */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Cambiar la navegación a vertical */
  }
}

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

Al aplicar estos enfoques, los elementos de la página se ajustarán automáticamente a diferentes tamaños de pantalla de los dispositivos.