Autor publikacji
Virtual Patriot - Administrator

Responsywny układ elementów HTML

Data publikacji
Ostatnio edytowano

W tej części kursu CSS zapoznamy się z responsywnym układem elementów HTML, czyli takim układem, który będzie zmieniał swoje właściwości CSS w zależności od pewnych czynników. Tworząc responsywny układ elementów HTML możemy określić wiele czynników, pod wpływem których układ elementów HTML będzie otrzymywał nowe właściwości CSS, jednak my skupimy się wyłącznie na wartości szerokości okna przeglądarki internetowej i to na podstawie tego czynnika będziemy tworzyć dodatkowe reguły CSS, które zostaną aktywowane w momencie gdy nasz dokument HTML znajdzie się w oknie przeglądarki internetowej, która będzie miała określoną wartość szerokości.

W poprzednich częściach kursu CSS utworzyliśmy układ elementów HTML, który składał się z nagłówka strony, stopki strony oraz trzech kolumn. Jak do tej pory nasz układ elementów HTML dopasowuje się automatycznie swoją szerokością do szerokości okna przeglądarki internetowej, jednak gdy nasz układ elementów HTML zostanie wyświetlony w mniejszej rozdzielczości, w mniejszym oknie przeglądarki internetowej, to może stracić swój urok.

Wspomniany układ elementów HTML został zaprezentowany poniżej.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Kod dokumentu HTML został umieszczony pod spodem. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
        min-width:480px;
        max-width:1600px;
        border-left:1px solid gold;
        border-right:1px solid gold;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
        font-size:1.6em;
        line-height:1.5em;
      }

      #lewy {
        float:left;
        width:25%;
        font-size:1em;
        line-height:1.5em;
      }

      #lewy p {
        border:1px solid gold;
        border-left:none;
        margin:15px 0;
        padding:15px;
      }

      #srodek {
        float:left;
        width:50%;
        font-size:1.2em;
        line-height:1.5em;
      }

      #srodek p {
        margin:15px 0;
        padding:15px;
      }

      #prawy {
        float:left;
        width:25%;
        font-size:1em;
        line-height:1.5em;
      }

      #prawy p {
        border:1px solid gold;
        border-right:none;
        margin:15px 0;
        padding:15px;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
        font-size:1.4em;
        line-height:1.5em;
      }
    </style>
  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn</p>
      </div>

      <div id="srodek">
        <p>to jest środkowa kolumna układu elementów HTML</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna układu elementów HTML</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Minimalną wartością szerokości naszego układu elementów HTML jest wartość 480px, ponieważ element #caly_blok zawiera w sobie właściwość min-width:480px; natomiast maksymalną wartością szerokości naszego układu elementów HTML jest wartość 1600px, ponieważ element #caly_blok zawiera w sobie właściwość max-width:1600px;

Załóżmy że chcemy, aby lewa środkowa oraz prawa kolumna, w naszym układzie elementów HTML, ułożyły się jedna pod drugą, ale tylko gdy nasz układ elementów HTML zostanie wyświetlony w oknie przeglądarki internetowej, która będzie miała szerokość od 480 pikseli do 768 pikseli.

Dzięki regułom @media oraz dodatkowym zapisom dla tych reguł, jakie pojawiły się wraz z rozwojem specyfikacji CSS3, możemy tworzyć reguły CSS, które zostaną aktywowane tylko w określonych przez nas sytuacjach.

Spójrzmy na następujący zapis: 

@media all and (min-width:480px) and (max-width:768px) {
  #lewy, #srodek, #prawy {
    float:none;
    width:auto;
    margin:15px;
  }

  #lewy p, #prawy p {
    border:1px solid gold;
  }
}

Zapis przedstawiony powyżej będzie mówił przeglądarce internetowej, że ma ona wykorzystać podane reguły CSS tylko wtedy, gdy nasza strona internetowa zostanie wyświetlona w oknie przeglądarki o wartości szerokości od 480 pikseli do 768 pikseli, ponieważ takie wartości podaliśmy w regule @media.

Gdy wspomniany warunek zostanie spełniony to do naszego układu elementów HTML zostaną dodana nowe reguły CSS, które nadpiszą istniejące reguły CSS, a więc elementy HTML, naszego układu, otrzymają nowe właściwości CSS.

Selektor #lewy, #srodek, #prawy odszuka elementy HTML z atrybutem identyfikatora o wartości lewy lub srodek lub prawy i doda do nich właściwość float:none; dzięki czemu dany blokowy element HTML nie będzie układał się obok drugiego blokowego elementu HTML z właściwością float, właściwość width:auto; dzięki czemu szerokość elementu blokowego będzie ustalana automatycznie przez przeglądarkę internetową, oraz właściwość margin:15px; dzięki czemu dane elementy HTML będą posiadały margines zewnętrzny o wartości 15 pikseli po każdej swojej stronie.

Selektor #lewy p, #prawy p odszuka każdy element p, który został umieszczony w elemencie HTML, który posiada atrybut identyfikatora o wartości lewy lub prawy, a następnie doda do takiego elementu p obramowanie, czyli właściwość border:1px solid gold;

Spróbuj zmienić rozmiar okna Twojej przeglądarki internetowej, na mniejszy, a zobaczysz co się stanie z układem elementów HTML, który został umieszczony poniżej.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Możemy również sprawić, aby kolumny naszego układu elementów HTML zawsze układały się jedna pod drugą, gdy wartość szerokości okna przeglądarki internetowej będzie mniejsza niż 769px, wtedy przedział wartości, w obrębie którego do naszego układu elementów HTML zostaną dodane dodatkowe reguły CSS, będzie wynosił od 0 do 768px. 

@media all and (max-width:769px) {
  #lewy, #srodek, #prawy {
    float:none;
    width:auto;
    margin:15px;
  }

  #lewy p, #prawy p {
    border:1px solid gold;
  }
}

Od tej pory zapis @media all and (max-width:769px) będzie mówił przeglądarce internetowej, że reguły CSS jakie są zapisane w regule @media mają być przeznaczone dla wszystkich typów urządzeń (all), oraz których (and) wartość szerokości okna przeglądarki internetowej jest mniejsza niż 769 pikseli, stąd zapis (max-width:769px).

Nie bez powodu we wcześniejszej części kursu CSS dodaliśmy do naszego układu elementów HTML jednostkę em, ponieważ w tym momencie możemy określić wartość właściwości font-size dla całego układu elementów, uwzględniając przy tym wartość szerokości okna przeglądarki internetowej, dzięki czemu właściwości CSS, które są określane za pomocą jednostki em zmienią się w wielu miejscach jednocześnie. 

@media all and (max-width:769px) {
  #caly_blok {
    font-size:15px;
  }

  #lewy, #srodek, #prawy {
    float:none;
    width:auto;
    margin:15px;
  }

  #lewy p, #prawy p {
    border:1px solid gold;
  }
}

Spróbuj zmienić rozmiar okna Twojej przeglądarki internetowej, na mniejszy, a zobaczysz co się stanie z naszym układem elementów HTML, który został umieszczony poniżej.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Kod dokumentu HTML został umieszczony pod spodem. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
        min-width:480px;
        max-width:1600px;
        border-left:1px solid gold;
        border-right:1px solid gold;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
        font-size:1.6em;
        line-height:1.5em;
      }

      #lewy {
        float:left;
        width:25%;
        font-size:1em;
        line-height:1.5em;
      }

      #lewy p {
        border:1px solid gold;
        border-left:none;
        margin:15px 0;
        padding:15px;
      }

      #srodek {
        float:left;
        width:50%;
        font-size:1.2em;
        line-height:1.5em;
      }

      #srodek p {
        margin:15px 0;
        padding:15px;
      }

      #prawy {
        float:left;
        width:25%;
        font-size:1em;
        line-height:1.5em;
      }

      #prawy p {
        border:1px solid gold;
        border-right:none;
        margin:15px 0;
        padding:15px;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
        font-size:1.4em;
        line-height:1.5em;
      }

      @media all and (max-width:769px) {
        #caly_blok {
          font-size:15px;
        }

        #lewy, #srodek, #prawy {
          float:none;
          width:auto;
          margin:15px;
        }

        #lewy p, #prawy p {
          border:1px solid gold;
        }
      }
    </style>
  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn</p>
      </div>

      <div id="srodek">
        <p>to jest środkowa kolumna układu elementów HTML</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna układu elementów HTML</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

W ten sposób, podczas trzech ostatnich części tego działu, udało nam się utworzyć prosty układ elementów HTML, który jest płynnym układem (tzw. liquid layout), responsywnym układem (tzw. responsive layout), oraz którego wartości niektórych właściwości CSS są określane za pomocą jednostek relatywnych.

Oczywiście przy większych projektach, które zawierają dziesiątki elementów HTML oraz setki reguł CSS, trzeba się o wiele więcej napracować, żeby tworzyć tego typu układy elementów HTML.

Więcej o regułach @media możesz dowiedzieć się z działu pierwszego - CSS3 - @media queries.

W następnej części kursu CSS poznamy technikę zwaną reset CSS.