Responsive Web Design

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj
Rozpoznanie i dostosowanie do wielkości urządzenia – Responsive Web Design (RWD).

Responsive Web Design (RWD) – technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na dużych ekranach, jak i na smartfonach czy tabletach.

Wdrażanie Responsive Web Design[edytuj]

Obsługa tej techniki odbywa się za pomocą tzw. media queries, które pozwalają rozpoznać rozdzielczość okna przeglądarki i zastosować odpowiedni arkusz stylu, lub jego fragment. Do działania możemy również użyć różnych skryptów JavaScript.

Tag HTML[edytuj]

Poniższy kod zmienia domyślne ustawienia skalowania zawartości przez urządzenie mobilne, co pozwala na tworzenie stron nie wymagających ciągłego powiększania i pomniejszanie przez użytkownika. Określa on również domyślną szerokość dokumentu na 100% szerokości wyświetlacza. Błędne określenie szerokości lub położenia elementów za pośrednictwem arkuszy stylów nadal powoduje konieczność przewijania strony w lewo bądź prawo.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Można również wstawić cały arkusz stylu, używając media queries.

    <link rel="stylesheet" type="text/css"
    media="screen and (max-width: 600px)"
    href="arkusz600.css" />

Powyższy fragment mówi o tym, że arkusz stylu o nazwie arkusz600.css będzie działał tylko wtedy kiedy szerokość przeglądarki będzie mniejsza lub równa 600 pikseli. Można również użyć np. min-width, max-height, min-height.

Media Queries w CSS[edytuj]

Jeśli nie potrzeba dzielić stylów na różne arkusze, można zrobić to wszystko w jednym pliku używając media queries.

    @media screen and (min-width: 480px) {
      a {
        color: red;
      }
    }

Powyższy fragment CSS powoduje pokolorowanie wszystkich odnośników, jeśli tylko szerokość przeglądarki będzie wynosić minimum 480 pikseli.

Przypisy