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.