Responsive Web Design

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacja, szukaj

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 wielkich ekranach (np. Full HD), jak i na ekranach smartfonów czy tabletów.

Wdrażanie Responsive Web Design[edytuj | edytuj kod]

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

Tag HTML[edytuj | edytuj kod]

Obowiązkowym fragmentem kodu HTML jest umieszczenie poniższego fragmentu w sekcji HEAD.

   <meta name="viewport" content="width=device-width" />

Możemy 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żemy również użyć np. min-width, max-height, min-height.

Media Queries w CSS[edytuj | edytuj kod]

Jeśli nie potrzebujemy dzielić stylów na różne arkusze, możemy 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