Strona responsywna – notatki z lekcji

Strona responsywna

Strona, która dostosowuje się do różnych rozmiarów ekranów i urządzeń.

Media Queries

CSS technika pozwalająca na dostosowanie stylów do różnych rozdzielczości ekranów.

Viewport

Obszar przeglądarki, który wyświetla zawartość strony internetowej.

Flexbox

Model układu w CSS, który pozwala na elastyczne rozmieszczanie elementów w kontenerze.

Grid

System układu w CSS składający się z wierszy i kolumn, umożliwiający precyzyjne rozmieszczanie elementów.

RWD

Responsive Web Design – podejście do projektowania stron, które zapewnia ich funkcjonalność na różnych urządzeniach.

Mobile-first

Podejście do projektowania, w którym najpierw tworzy się strony dla urządzeń mobilnych, a potem dla desktopów.

Bootstrap

Framework CSS, który ułatwia tworzenie responsywnych stron internetowych.

Fluid Grids

Układ, w którym rozmiary elementów są wyrażane w procentach, co pozwala na ich płynne dostosowanie.

Prawda czy fałsz: Responsywne strony są trudniejsze do zbudowania

Prawda, ponieważ wymagają więcej przemyślenia i testowania na różnych urządzeniach.

Różnica między RWD a adaptacyjnym designem

RWD zmienia rozmiary elementów, adaptacyjny design tworzy różne wersje strony dla różnych urządzeń.

Uzupełnij zdanie: Media queries są używane do ___

dostosowywania stylów CSS do rozmiarów ekranu.

Co to jest 'breakpoint'?

Miejsce w CSS, gdzie zmieniają się style w zależności od rozmiaru ekranu.

Przykład zastosowania Flexbox

Ułatwia centrowanie elementów w kontenerze oraz tworzy elastyczne układy.

Kiedy używać Grid?

Kiedy potrzebujemy skomplikowanego układu z wieloma wierszami i kolumnami.

Czym jest 'responsive images'?

Obrazki, które automatycznie zmieniają rozmiar w zależności od rozdzielczości ekranu.

Jakie są zalety responsywnych stron?

Lepsze doświadczenia użytkowników, SEO, mniejsze koszty utrzymania.