Responsywność strony

Responsywny projekt w HTML oznacza projektowanie strony internetowej, która dostosowuje się do różnych rozmiarów i urządzeń ekranowych. Osiąga się to za pomocą kwerend mediów CSS, które określają różne style dla różnych rozmiarów i rozdzielczości ekranu, oraz za pomocą elastycznych układów i obrazów, które mogą skalować się z rozmiarem ekranu urządzenia.

Przykład użycia kwerend mediów CSS w HTML

								
/* Styl dla ekranów większych niż 480px */
@media only screen and (min-width: 480px) {
  .container {
      width: 80%; /* Szerokość kontenera */
      margin: auto; /* Automatyczne marginesy */
  }
}


/* Styl dla ekranów mniejszych niż 480px */
@media only screen and (max-width: 480px) {
  .container {
      width: 95%; /* Szerokość kontenera */
      margin: auto; /* Automatyczne marginesy */
  }
}

Wyjaśnienie

W powyższym przykładzie, kontener z klasą .container będzie miał szerokość 80% i marginesy automatyczne dla urządzeń o szerokości co najmniej 480 pikseli. Dla urządzeń o szerokości mniejszej niż 480 pikseli, szerokość kontenera będzie wynosić 95%, a marginesy automatyczne.