Responsywne projektowanie stron

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

Responsywne projektowanie stron, czyli RWD od ang. Responsive Web Design, polega na tworzeniu witryn, które poprawnie wyświetlają się na różnych urządzeniach: komputerach, tabletach i smartfonach. Strona responsywna dostosowuje układ, obrazy, tekst i odstępy do szerokości ekranu.

Najważniejsze techniki RWD

W responsywnym projektowaniu stosuje się m.in.:

  • elastyczne szerokości elementów, np. width: 100%,
  • jednostki względne, np. %, em, rem, vw,
  • elastyczne obrazy, np. max-width: 100%,
  • zapytania medialne, czyli @media,
  • znacznik viewport w sekcji <head> dokumentu HTML.

Przykład

<meta name="viewport" content="width=device-width, initial-scale=1.0">

body {
  font-size: 100%;
}

.container {
  width: 90%;
  margin: auto;
}

@media (max-width: 600px) {
  h1 {
    font-size: 130%;
  }
}

Dlaczego procenty są ważne?

Procenty są jednostkami względnymi. Oznacza to, że wartość jest obliczana względem innego rozmiaru, np. elementu nadrzędnego lub domyślnych ustawień przeglądarki. W kontekście urządzeń mobilnych ułatwia to skalowanie tekstu i elementów strony.

W pytaniach egzaminacyjnych dotyczących dostosowania strony do urządzeń mobilnych poprawną odpowiedzią często są właśnie jednostki względne, np. procenty, a nie piksele lub milimetry.