

RWD
Responsive Web Design
Wraz z rozwojem internetu kolejne urządzenia dostawały możliwość przeglądania sieci. Już nie tylko na kineskopowym ekranie monitora Pan Kowalski przeszukiwał internet. Co raz częściej umożliwiały to urządzenia mobilne jak: telefony, tablety czy nawet telewizory.
W ten sposób zrodziła się potrzeba dostosowania stron do innych urządzeń posiadających niewielkie ekrany, gdzie obsługa zamiast myszki odbywała się ruchem palca po ekranie. Jednym z popularniejszych rozwiązań było tworzenie drugiej wersji strony jednak nadal pozostawał problem rozdzielczości gdyż małe ekrany zwyczajnie się różniły.
Na pomoc przyszło RWD – responsive web design, czyli technika projektowania stron WWW w taki sposób aby elementy same dostosowywały się do ekranu. Tworzenie stron responsywnych polega na tworzeniu styli CSS innych pod dane rozdzielczości.
Jak to wygląda w praktyce:
Określamy dla jakich rozdzielczości dany obiekt (element, blokowy bądź liniowy) jak się będzie zachowywał.
Przykład:
<!doctype html> <html> <style> .element { background-color: red; width: 33%; float: left; } </style> </head> <body> <div class="blok"> <div class="element">Treść1</div> <div class="element">Treść2</div> <div class="element">Treść3</div> </div> </body> </html> W takim wypadku bloki będą miały zawsze 1/3 szerokości. <!doctype html> <html> <style> @media screen and (min-width: 481px) { .element { background-color: red; width: 33%; float: left; } } @media screen and (max-width: 480px) { .element { background-color: green; width: 100%; float: left; } } </style> </head> <body> <div class="blok"> <div class="element">Treść1</div> <div class="element">Treść2</div> <div class="element">Treść3</div> </div> </body> </html>
W tym rozwiązaniu po osiągnięciu rozdzielczości 480px strona zmieni swój układ – divy z klasą element nie będą obok siebie a pod sobą.
Ta technika pozwala w dość łatwy sposób dostosować stronę do każdej rozdzielczości.