Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Responsywny układ elementów

Podczas poprzednich zajęć utworzyliśmy płynny szablon, który w pewnym stopniu dostosowywał naszą stronę do urządzenia na którym jest ona wyświetlana. Stworzenie strony w pełni dostosowanej do prezentacji za pomocą różnych urządzeń (smartfon, tablet, monitor) umożliwia zastosowanie zapytaniu o media @media, sprawdzającego między innymi rozdzielczość tych urządzeń. Dla różnych zakresów rozdzielczości możemy wtedy definiować odmienne właściwości elementów. Strony w ten sposób tworzone noszą nazwę stron responsywnych (ang. responsive – elastyczny, czuły, wrażliwy). Przykładowy fragment arkusza stylów strony responsywnej, dla strony wykonywanej podczas poprzednich zajęć może wyglądać następująco:

@media screen and (max-width:1000px)
{
  div.pojemnik
  {
    font-size:10px;
  }
  
  div.pojemnik > div.naglowek, div.pojemnik > div.stopka
  {
    background-color:maroon;
  }
}
@media screen and (min-width:1000px)
{
  div.pojemnik
  {
    font-size:12px;
  }
  
  div.pojemnik > div.naglowek, div.pojemnik > div.stopka
  {
    background-color:teal;
  }
}

W pokazanym przykładzie pierwszy blok @media, zawiera właściwości dla rozdzielczości ekranu poniżej 1000px, natomiast dla rozdzielczości 1000px i większej właściwości przyjmą wartości określone w drugim bloku. Ten przykład jest bardzo prosty, w praktyce nalażałoby sprecyzować kilka przedziałów rodzielczości, zgodnych z rozdzielczościami stosowanymi aktualnie w różnych urządzeniach. Należy również zaznaczyć, że szerokość to tylko jedna z cech mediów, których szczegółowo nie będziemy omawiać.

Utworzyć stronę z responsywnym układem elementów - ćwiczenie 4_2_0_1

Zadanie polega na wykonaniu odpowiednich zmian w ćwiczeniu z poprzednich zajęć. Plik plynny_szablon.html, nazwijmy teraz uklad_responsywny.html. Ten plik pozostanie bez zmian. Zmiany dokonamy w arkuszu stylów style.css. Należy dopisać do niego pokazane wyżej bloki @media.

Strona pokazana w górnej ramce pozornie niczym się nie różni od strony wykonanej w poprzednim ćwiczeniu. Szerokość ramki wynosi 880px, a więc jest mniejsza od 1000px - dlatego mamy czcionkę pojemnika font-size:10px; oraz kolor nagłówka i stopki background-color:maroon;. Otwórz stronę uklad_responsywny.html i za pomocą myszki zmieniaj szerokość okna przeglądarki. Jeżeli szerokość będzie większa od 1000px, to zmieni się kolor nagłówka i stopki oraz rozmiary czcionek poszczególnych elementów. Dlaczego czcionki wszystkich elementów, a nie tylko pojemnika? Przypominam, że dzieje się tak dlatego, ponieważ rozmiar czcionki elementów-dzieci określony jest w jednostkach em. Ramka poniżej ma szerość 1024px i dla tej szerokości nasza strona wygląda następująco:




Nie ma gotowego "przepisu" na stronę. Można również na różne sposoby osiągać ten sam efekt. Czym więc się kierować? Odpowiedź jest prosta - logiką. Rozwiązania powinny być jak najprostsze i sprawdzać się w różnych rozdzielczościach na różnych urządzeniach.