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.