HTML

Web o webu

Responzivní web

Responzivní rozvržení webové stránky

Připravuje se návod a ukázka

Responzivní menu

Připravuje se návod a ukázka

Responzivní obsah stránky - tvorba responzivních sloupců

Bloky tvořící ve stránce sloupce s určitým obsahem se díky procentuální šířce budou přizpůsobovat šířce okna - viz kapitola Bloky - Tvorba sloupců s proměnlivou šířkou.

Pomocí Media Queries - viz záložka CSS může být navíc počet sloupců, které budou zobrazeny vedle sebe, měněn v závislosti na šířce zařízení (na velkém monitoru 5 sloupců, na tabletu 3 nebo 2 sloupce, na mobilu vše v 1 sloupci pod sebou).

Grid systém může být například pětisloupcový nebo třeba až dvanáctisloupcový.

Ukázka responzivních sloupců se zachováním šířky ve skupině

Myší roztáhněte ukázkový blok, dojde k přeuspořádání sloupců (ukázkový blok simuluje okno prohlížeče):

Šířka bloků každé skupiny je stejná. Poslední lichý blok je vycentrován. To je vhodné pro vytváření tlačítkových odkazů nebo pro fotogalerii osob (při použití jedné z uvedených tříd budou všechny fotografie stejně velké).

V další ukázce bloky vždy vyplní celou šířku stránky. To je pro bloky s texty vhodnější. Lze to využít i pro fotogalerii (při dělení lichého počtu jsou větší nahoře).

Ukázka responzivních sloupců s vyplněním celé šířky stránky

Myší roztáhněte ukázkový blok, dojde k přeuspořádání sloupců. Mění se šířka bloků i ve skupině tak, aby byla vždy vyplněna celá stránka:

Je zde oproti první ukázce změněno přeuspořádání bloků z pěti na 2  větší a 3 menší, pak na 1 a 2 a 2.

Obdobně 3 bloky se přeuspořádají na 1 velký a 2 menší pod ním.

Takovéto uspořádání je pro textové sloupce vhodnější než v první ukázce.

Použité třídy stylů jsou pomocí Media Queries předefinovány (změněny % šířky) podle velikosti zařízení.

Ukázka řešení pomocí předefinování třídy

HTML - ukázka 1,  2 - sloupcové bloky vložíme do obalovacích bloků, třídy jsou použity u vnitřních bloků:

  <div>
    <div class="sl-1">sl-1</div>
  </div>
  <div>
    <div class="sl-2">sl-2</div>
    <div class="sl-2">sl-2</div>
  </div>
  <div>
    <div class="sl-3">sl-3</div>
    <div class="sl-3">sl-3<br>text text</div>
    <div class="sl-3">sl-3</div>
  </div>
  <div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
    <div class="sl-4">sl-4</div>
  </div>
  <div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
    <div class="sl-5">sl-5</div>
  </div>

CSS styly ukázky 1:

/* CSS Document */
/* základní styly */
.sl-1, .sl-2, .sl-3, .sl-4, .sl-5 {
 float: left; overflow: auto; box-sizing: border-box; padding: 0.2em 1em;
 border: 1px solid #6E4941; margin: 0.2em 0; background-color: #E3D6CD;}
.sl-1:first-child, .sl-2:first-child, .sl-3:first-child, .sl-4:first-child,
.sl-5:first-child {clear: left;} /* nutné při různé výšce bloků
- pro správné umístění prvního bloku skupiny zcela vlevo */

/* pro mobily */
.sl-1, .sl-2, .sl-3, .sl-4, .sl-5 {width: 100%;}

@media screen and (min-width: 1024px) {
  /* pro počítače */
  /* bez mezer mezi bloky
  .sl-1 {width: 100%;}
  .sl-2 {width: 50%;}
  .sl-3 {width: 33.33333332%;}
  .sl-4 {width: 25%;}
  .sl-5 {width: 20%;} */

  /* s mezerami mezi bloky */
  .sl-1 {width: 98%; margin: 1%;} /* 1% + 98% + 1% = 100%  */
  .sl-2 {width: 48%; margin: 1%;} /* 1% + 48% + 1% = 50%   */
  .sl-3 {width: 31.33333332%; margin: 1%;} /* 33.33333332% */
  .sl-4 {width: 23%; margin: 1%;} /* 25% */
  .sl-5 {width: 18%; margin: 1%;} /* 20% */
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  /* pro tablety */
  /* s mezerami mezi bloky */
  .sl-1 {width: 98%; margin: 1%;} /* 100% */
  .sl-2 {width: 48%; margin: 1%;} /* 50% */
  .sl-3 {width: 48%; margin: 1%;} /* budou 2 a 1 pod */
  .sl-4 {width: 48%; margin: 1%;} /* budou po 2 pod sebou */
  .sl-5 {width: 48%; margin: 1%;} /* budou 2 a 2 a 1 */

  /* vycentrování lichého bloku */
  .sl-3:last-child, .sl-5:last-child {float: none; margin-left: auto;
   margin-right: auto;}
}

CSS styly ukázky 2:

Styly pro mobily a počítače jsou stejné jako v ukázce 1.

Pro tablety jsou zde vytvořeny dvoje Media Queries - pro menší a pro větší tablety:

@media screen and (min-width: 800px) and (max-width: 1023px) {
  /* pro větší tablety a malé notebooky */
  .sl-1 {width: 98%;} /* bude 1 */
  .sl-2 {width: 48%;} /* budou 2 */
  .sl-3 {width: 31.33333332%;} /* budou 3  */
  .sl-4 {width: 48%;} /* budou po 2 pod sebou */
  .sl-5 {width: 31.33333332%;} /* budou 2 a 3 */
  /* horní 2 bloky z pětice - tedy první a druhý */
  .sl-5:nth-child(1), .sl-5:nth-child(2) {width: 48%;}
}

@media screen and (min-width: 600px) and (max-width: 799px) {
  /* pro malé tablety */
  .sl-1 {width: 98%;} /* bude 1 */
  .sl-2 {width: 48%;} /* budou 2 */
  .sl-3:first-child {width: 98%;} /* budou 1 a 2 pod ním */
  .sl-3:nth-child(2), .sl-3:nth-child(3) {width: 48%;} /* 2 spodní */
  .sl-4 {width: 48%;} /* budou po 2 pod sebou */
  .sl-5 {width: 48%;} /* budou 1 a 2 a 2 */
  .sl-5:first-child {width: 98%;} /* 1 horní */
}

HTM struktura - jiný způsob:

Class můžeme přiřadit ne blokům, které jsou zobrazeny jako tlačítka nebo sloupce, ale jejich nadřazeným blokům:

  <div class="blok-sl-1">
    <div></div>
  </div>
  <div class="blok-sl-2">
    <div></div>
    <div></div>
  </div>
  <div class="blok-sl-3">
    <div></div>
    <div></div>
    <div></div>
  </div>

Využijeme kontextuální definici stylu pro blok uvnitř dané třídy:

Místo třídy .sl-1 zapíšeme .blok-sl-1 > div. Obdobně vytvoříme třídy .blok-sl-2 až .blok-sl-5. Oba způsoby lze kombinovat. Sloupce v blocích, majících třídu blok-sl-1 apod., můžeme nastavit tak jako v ukázce 2, bloky uvnitř, které mají navíc třídu sl-1 apod., můžeme nastavit se stejnou šířkou jako v ukázce 1.

Druhý způsob řešení responzivity sloupců:

Pro různá zařízení můžeme vytvořit různé třídy stylů a v blocích pak zadat třídy jak pro velké, tak střední i malé rozlišení.

Návod na řešení pomocí více tříd - grid systém

Stránku si pomyslně rozdělíme mřížkou na 12 sloupců. Označení tříd bude vyjadřovat, přes kolik sloupců bude blok široký.

Blok třídy col-1 bude nejmenší, col-2 bude přes 2 sloupce (může jich být tedy 6 vedle sebe), col-3 bude přes 3 sloupce (mohou být 4 bloky vedle sebe), col-4 (3 vedle sebe), col-6 (2 vedle sebe) a col-12 (přes celou šířku).

Vedle sebe lze umístit i nestejně široké bloky. Např. jeden col-6 a dva col-4 nebo col-8 a col-4 (součet vždy musí být 12).

Šířku v % vypočteme jako podíl z celkové šířky, tedy např. pro col-3 to bude 25%, pro col-4 to bude 100%/3, tedy 33.333332%. Pokud budou mít bloky mezi sebou mezery, zadáme margin v % a width zmenšíme o procenta levého a pravého okraje. Použijeme box-sizing: border-box a díky tomu můžeme padding a border nastavit libovolně bez vlivu na šířku.

K těmto třídám vytvoříme adekvátní třídy md-col-1, md-col-2 až md-col-12 ve stylech pro @media střední velikosti a obdobně sm-col-1 až sm-col-12 pro @media malé velikosti. Procenta šířky budou stejná.

Blokům, které chceme zobrazit na všech zařízeních po dvou vedle sebe přiřadíme třídu col-6 (nemusíme přidávat třídy md-col-6 a sm-col-6).

Blokům, které chceme na větším monitoru zobrazit přes 3 sloupce (4 bloky vedle), na tabletu přes 6 sloupců (2 bloky vedle sebe) a na mobilu přes celou šířku, přiřadíme tyto třídy stylů:

<div class="col-3 md-col-6 sm-col-12"></div>

V css souboru musí být obecné třídy col-1 až col-12 zapsány dříve než ostatní. Teprve pod nimi budou v Media Queries (@media s rozmezím šířky středních zařízení) zapsány třídy md-col-1 až md-col-12 a obdobně v Media Queries (@media s maximální šířkou malých zařízení) budou zapsány třídy sm-col-1 až sm-col-12.

  • Pokud zařízení nebude mít rozměry odpovídající podmínkám v Media Queries, styly md-col-6 a sm-col-12 budou přeskočeny a bloku zůstane styl třídy col-3 (šířka 25%).
  • Jestliže zařízení bude mít rozlišení v rozmezí zadaném @media pro střední velikosti (zde definovány třídy md-col-1 až md-col-12), bude aplikovat styl třídy md-col-6 (šířka 50%).
  • Bude-li mít zařízení rozměry v intervalu zapsaném pro @media pro mobily (třídy sm-col-1 až sm-col-12), bude nalezena třída sm-col-12 (nebude nalezena třída md-col-6) a bude se aplikovat styl sm-col-12 (šířka 100%).

Responzivní bannery a obrázky - bloky s obrázkem na pozadí měnící šířku i výšku

Vytvoříme-li obrázky pomocí značky img s pevnými rozměry, budou se obrázky přeskupovat ve stránce podle toho, jak se vejdou. Pokud nebude žádný obrázek širší než je šířka mobilu, bude i takováto jednoduchá fotogalerie víceméně responzivní. Zobrazení na mobilu můžeme vylepšit tím, že zde nastavíme šířku img na 100%.

Chceme-li, aby obrázky měnily svou šířku a výšku, vytvoříme je jako bloky (div) s obrázkem na pozadí (background-image). Pomocí Media Queries - viz záložka CSS může být navíc počet obrázků, které budou zobrazeny vedle sebe, měněn v závislosti na šířce zařízení stejně jako je popsáno výše u responzivních sloupců.

Blokům zadáme šířku v % a horní nebo dolní padding v % (procenta se budou počítat ze šířky, neboť výška nebude zadána). Pro fotografie v poměru 4:3 zadáme padding 75%, pro fotografie v poměru 16:9 zadáme padding 56%. Můžeme také vytvořit čtvercové bloky s paddingem 100%, v nichž bude fotografie umístěna na střed, ať už bude na šířku nebo na výšku.

  • width - %
  • height - nezadáno
  • padding-top nebo padding-bottom - %