Responsywne projektowanie stron

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Responsywne projektowanie stron

Responsywne projektowanie stron (RWD, ang. Responsive Web Design) polega na tworzeniu witryn, które poprawnie wyglądają i działają na różnych urządzeniach: komputerach, tabletach i smartfonach.

Celem RWD jest dopasowanie układu strony do szerokości ekranu, bez konieczności tworzenia osobnej wersji strony dla każdego urządzenia.

Najważniejsze zasady RWD

  • stosowanie elastycznych szerokości, np. w %, vw, em, rem,
  • dopasowywanie obrazów do szerokości kontenera,
  • używanie zapytań medialnych CSS, czyli @media,
  • unikanie sztywnych układów opartych wyłącznie na pikselach,
  • projektowanie czytelnej nawigacji dla małych ekranów.

Przykład elastycznego układu

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Taki kontener zajmuje 90% szerokości dostępnego miejsca, ale nie przekracza 1200 px. Dzięki temu strona może wyglądać dobrze zarówno na dużym monitorze, jak i na mniejszym ekranie.

Dlaczego procenty są ważne?

Wielkości podane w procentach zależą od rozmiaru elementu nadrzędnego. Jeśli obraz ma width: 100%, dopasuje się do szerokości kontenera. To zapobiega wychodzeniu grafiki poza ekran na urządzeniach mobilnych.

W pytaniach egzaminacyjnych poprawną odpowiedzią często jest rozwiązanie elastyczne, np. ustawianie szerokości obrazów w procentach, a nie wyłącznie w pikselach.