Responsywność (RWD)

CZYM JEST RESPONSYWNOŚĆ?

RWD (responsive web design) to taki sposób projektowania stron internetowych, który umożliwia dopasowywanie się strony do rozdzielczości ekranu. Tworzenie strony w takiej technice sprawia, że strona wyświetla się dobrze zarówno na smartphonie i tablecie jak i na laptopie. Wielu użytkowników pierwszy raz widzi stronę na smartphonie. Wracają do niej później jeśli nie wczytywała się zbyt długo i znaleźli na niej to czego szukali. To czy znaleźli potrzebne informacje zależy od tego czy wyglądała dobrze i wszystko było widoczne (np. nie było konieczności przewijania strony w prawo).

Przed wejściem w życie CSS3, webdesignerzy tworzyli osobne strony – wersje mobilne np. „m.rejkowicz.pl”. Oznacza to, że kopiowano całą stronę na subdomenę, co niepotrzebnie obciążało serwer. Teraz robi się to znacznie prościej, dzięki regułom @media.

JAK ZROBIĆ RESPONSYWNĄ STRONĘ?

W arkuszu stylów używa się reguł @media. Razem ze specyfikacją CSS3, te reguły zostały rozbudowane, pojawiły się istotne dla responsywności, właściwości takie jak:

OZNACZENIE PRZEZNACZENIE
width szerokość- konkretna wartość
height wysokość- konkretna wartość
min-height, min-width najmniejsza wysokość/szerokość
max-height, max-width największa wysokość/szerokość
and i
all wszystko

PRZYKŁADY UŻYCIA REGUŁ @MEDIA

Poniższy kod, który został wpisany do arkusza CSS oznacza, że dla każdej rozdzielczości przeglądarki, która jest mniejsza niż 800 px, tło strony będzie czerwone. Dla wszystkich innych rozdzielczości ta własność będzie pomijana.

@media (max-width:800px) {
  body {
    background-color: red;
  }
}

Poniżej przykład, w którym dla rozdzielczości między 800 px a 1000 px szerokość sekcji ma wynosić 100%. W tym przykładzie jest użyte również and

@media (min-width: 800px) and (max-width: 1000px) {
  section {
    width: 100%;
  }
}

W ostatnim przykładzie określamy, że tło strony ma być zielone dla rozdzielczości 400 px a także od 800 px do 1000 px.

@media (width: 400px) and (min-width: 800px) and (max-width: 1000px) {
  body{
	  background: green;
  }
}

Aby reguły @media działały, należy w sekcji head wstawić poniższą linijkę.

<meta name="viewport" content="width=device-width, initial-scale=1" />

BOOTSTRAP

Można użyć także gotowych rozwiązań takich jak np. Bootsrap.
Jest to framework z gotowymi stylami CSS. Należy dołączyć go do strony (wkleić plik na serwer i umieścić ścieżkę w sekcji head . Programista musi w kodzie html użyć takich klas i id, które są zdefiniowane w pliku bootstrap.min.css.

Użycie bootstrapa jest znacznie szybsze niż pisanie responsywnych stron od zera. Dobrze jest jednak znać reguły @media, aby szybko edytować to co nie do końca nam odpowiada w uniwersalnym szablonie.

4 komentarze

Add a Comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *