SEOMaster
Wiedza / Diagramy / Frontend i responsywność
Responsywny układ (viewport)
Responsywny układ dopasowuje się do szerokości ekranu — ten sam kod, różne widoki.
Co pokazuje ten diagram?
Jak kod zmienia się w responsywny interfejs i gdzie powstaje HTML w różnych strategiach renderowania.
RWD (Responsive Web Design) to podejście, w którym jeden kod strony dopasowuje swój układ do szerokości ekranu — od telefonu, przez tablet, po duży monitor. Osiąga się to elastycznymi siatkami i regułami CSS (media queries).
Pomaga dobrać viewport, SSR, SSG lub CSR oraz wyjaśnić ich wpływ na użytkownika i crawlera.
Jak czytać schemat
- Desktop
- Tablet
- Telefon
Pełne wyjaśnienie pojęcia
RWD (responsywność) — Strona dopasowująca się do każdego ekranu.
Jak użyć diagramu?
Otwórz sam plik SVG, aby powiększyć go bez utraty jakości, albo odwołaj się do tej strony, gdy potrzebujesz również opisu, legendy i powiązanych materiałów.