Responsywne strony WWW

  • Sharebar

W dzisiejszych czasach, aby zaistnieć w Internecie nie wystarczy już tylko stworzyć strony, która wygląda dobrze na ekranie komputera. Trzeba pamiętać, że coraz większa liczba użytkowników korzysta z urządzeń mobilnych, aby przeglądać sieć. Przeglądanie zwykłych stron na małym ekranie jest nie wygodne i męczące, dlatego też zaistniała potrzeba tworzenie nowego rodzaju stron przeznaczonych również dla urządzeń mobilnych.

Aby uniknąć problemów jakie niesie ze sobą tworzenie osobnej strony przeznaczonej dla urządzeń typu smartphone czy tablet, powstałą idea stron responsywnych (ang. responsive design). Polega ona na tym, że tworzymy jedną stronę, która będzie wyświetlana na różnych urządzeniach w różny sposób.

Aby móc “kodzić” takie strony należy zaprzyjaźnić się z językiem CSS w wersji 3, a mianowicie funkcją Media Queries, którą ten język oferuje. Dzięki niej jesteśmy w stanie nadać jednemu elementowi na naszej stronie, różny wygląd w zależności od szerokości ekranu na jakim jest wyświetlany. Poniżej przykład użycia Media Queries.

@media only screen and (max-width:1024px){
#element1{właściwości elementu 1}

.element2{właściwości klasy element 2}
}

Jak widać całość nie różni się, aż tak bardzo od zwykłego użycia języka CSS. Jedyną różnicą jest formułka “@media only screen and (max-width:1024px)” mówiąca przeglądarkom internetowym, że jeśli strona jest wyświetlana w oknie o szerokości 1024 pikseli lub mniejszym  to użyte zostaną style zawarte znajdujące się pomiędzy nawiasami klamrowymi. Oczywiście zamiast słówka “max” można użyć “min”. W tedy cała formuła zastosowana zostanie dla szerokości 1024 piksele i większych. Zwykle określenie pojedynczej szerokości to za mało. Zazwyczaj stosuje się kilka, w celu uzyskania jak najlepszego efektu na coraz to mniejszych ekranach.

Takie rozwiązanie staje się coraz bardziej popularne i jest wygodniejsze dla wyszukiwarek internetowych, które nie muszą sprawdzać zwykłej strony i strony w wersji mobilnej, lecz tylko pojedynczą stronę, której wygląd zostanie dopasowany w zależności od wielkości ekranu.

 

VN:F [1.9.17_1161]
Ocena: 0.0/5 (0 oddanych głosów)

Podobne wpisy:

  1. Projektowanie stron na urządzenia przenośne
  2. Strony www
  3. Strony www Wrocław
  4. Projektowanie stron www a jakość
  5. Przyszłość marketingu = strony www
Komentarze i pingowanie jest obecnie wyłączone.

Komentarze są wyłączone.