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.
Obecnie responsywność stron to standard. Mimo to wiele firm wciąż posiada strony, z których nie da się skorzystać na urządzeniach mobilnych. Wiadomo, że klient, który wejdzie na taką stronę np. na smartfonie później już na nią nie wróci.
Dokładnie tak! 🙂
Artykuł za bardzo nie jest bogaty w rozwinięte przykłady 😉 i dlatego nic nie wniósł do rozwiązania mojego problemu ze stroną na której mam 3 horyzontalnie położone pod sobą div z tłem obrazkowym ; z tym że środkowa część „powiększa się” w miarę pisanego tekstu. A responsywności całej strony jakoś nie mogę na podstawie tego arta wykoncypować. Znajdę tu jakieś sugestie rozwiązania?
Jak napiszę artykuł „Mam trzy divy położone pod sobą, jak sprawić żeby środkowy się nie powiększał jak piszę tekst” i nie znajdzie Pan w treści rozwiązania to proszę o maila i wielkiego minusa 🙂 Rozwiązaniem Pana problemu może być: FLEXBOX lub GRID lub: Elementy równej wyoskości.