RWD (Responsive Web Design)

RWD — Responsive Web Design

RWD oznacza projektowanie stron internetowych tak, aby poprawnie wyglądały i działały na różnych urządzeniach: komputerach, tabletach i smartfonach. Strona responsywna automatycznie dopasowuje układ, rozmiary elementów i sposób wyświetlania treści do szerokości ekranu.

Główne techniki RWD

Do tworzenia stron responsywnych używa się przede wszystkim:

• elastycznych układów, np. procentowych szerokości,
• elastycznych obrazów,
• jednostek względnych, np. %, em, rem, vw,
• reguł @media w CSS,
• układów CSS Flexbox i Grid.

Przykład

.menu {
  display: flex;
}

@media (max-width: 700px) {
  .menu {
    flex-direction: column;
  }
}

Na szerokim ekranie menu jest poziome, a na małym ekranie zmienia się w pionowe.

Dlaczego RWD jest ważne?

Współczesne strony są odwiedzane z wielu typów urządzeń. Brak responsywności może powodować konieczność przewijania w poziomie, zbyt mały tekst, nieczytelne menu lub źle dopasowane grafiki.

W egzaminie

Jeżeli pytanie wspomina o dopasowaniu strony do szerokości ekranu, urządzeń mobilnych lub responsywności, należy kojarzyć temat z RWD i regułą CSS @media.