Wprowadzenie do układu stron dla różnych ekranów w CSS

W dzisiejszych czasach strona internetowa musi być poprawnie wyświetlana na urządzeniach o różnych rozmiarach ekranu.

Zazwyczaj urządzenia dzieli się na cztery klasy: komputery (desktop), laptopy, tablety (tablet) i telefony (mobile).

Dawniej, w zamierzchłych czasach, znane były popularne rozmiary ekranów wszystkich urządzeń, na szczęście nie było ich tak wiele. I strony robiono tak, aby były poprawnie wyświetlane na znanej liście rozdzielczości.

Obecnie urządzeń stało się tak dużo, że nie da się stworzyć listy rozdzielczości, dla których trzeba zrobić stronę. Obecnie uważa się, że układ strony powinien być poprawnie wyświetlany na ekranie o dowolnym rozmiarze.

Osiąga się to poprzez przebudowę bloków w kluczowych punktach układu. Przy czym te punkty kluczowe wybiera się nie dla konkretnych urządzeń, lecz dla treści strony - tak, aby wyglądała dobrze.

Pomiędzy punktami kluczowymi szerokość elementów strony powinna być płynna, aby dostosowywała się do szerokości ekranu. A w punktach kluczowych następuje przebudowa bloków na inne pozycje.

Opisany układ strony nazywa się adaptacyjnym lub responsywnym (responsive). Jego nauką zajmiemy się w następnych lekcjach.