Ako spraviť webovú stránku responzívnou?

Použitie flexibilných mriežok (Flexbox, Grid), mediálnych dopytov na zmenu štýlov pri rôznych rozlíšeniach obrazovky, relatívnych jednotiek merania (%, rem, em, vw, vh) a flexibilných obrázkov (max-width: 100%; height: auto;).

/* Mediálny dopyt pre obrazovky do 768px šírky */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Zmena navigácie na zvislú */
  }
}

<img src="image.jpg" alt="Prispôsobiteľný obrázok" style="max-width: 100%; height: auto;">

Použitím týchto prístupov sa prvky stránky automaticky prispôsobia rôznym veľkostiam obrazoviek zariadení.