Responsywność (ang. responsiveness) to zdolność strony internetowej lub aplikacji do automatycznego dostosowywania układu, rozmiarów elementów i funkcjonalności do różnych rozmiarów ekranów i urządzeń (np. komputerów, tabletów, smartfonów).
Kluczowe cechy responsywności:
- Płynny układ (fluid layout) – elementy skalują się proporcjonalnie do szerokości ekranu (np. używając jednostek '%’, 'vw’, 'rem’ zamiast sztywnych 'px’).
- Media queries – zapytania CSS, które pozwalają zastosować różne style w zależności od rozdzielczości, orientacji ekranu (pion/poziom) czy typu urządzenia.
- Elastyczne obrazy i multimedia – np. ustawienie 'max-width: 100%’, aby nie wychodziły poza ekran.
- Dostosowana nawigacja – np. zamiana menu na przycisk „hamburger” na małych ekranach.
Dlaczego responsywność jest ważna?
- Użytkownicy – wygoda przeglądania na dowolnym urządzeniu.
- SEO – Google faworyzuje strony responsywne w wynikach wyszukiwania.
- Koszt i czas – jedna wersja strony zamiast osobnych dla desktopu i mobile.
Przykład:
Na desktopie strona wyświetla 3 kolumny, na tablecie – 2, a na smartfonie – 1 kolumnę z pionowym przewijaniem.