Responsive web design

(Przekierowano z Responsive Web Design)

Responsive web design (RWD) – technika takiego projektowania strony WWW, aby jej układ dostosowywał się samoczynnie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona utworzona tą techniką jest uniwersalna: wyświetla się dobrze na dużych ekranach oraz na smartfonach i tabletach.

Rozpoznanie i dostosowanie do wielkości urządzenia – responsive web design (RWD).

Wdrażanie responsive web designEdytuj

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 HTMLEdytuj

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 CSSEdytuj

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.

PrzypisyEdytuj