Responsive web design

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 przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów. 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

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

Poniższy kod zmienia domyślne ustawienia skalowania zawartości przez urządzenie mobilne, co pozwala na tworzenie stron niewymagają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"
    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

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.