Responzivní web

Responzivní web je takový web, jehož stránky se přizpůsobují velikosti zařízení, a to jak rozměry jednotlivých bloků (zadané v %), tak jejich uspořádáním. Na monitoru počítače mohou být některé bloky vedle sebe ve sloupcích, na displeji mobilu mohou být tytéž bloky řazeny pod sebou.

HTML struktura stránky je neměnná, ale v CSS stylech lze zadat podmínky pro přiřazení určitých stylů podle velikosti zařízení.

Pro vytvoření návrhu responzivní stránky jsou nezbytné znalosti všech částí kapitol Návrh stránky (jednoduché rozvržení vhodné pro mobily), Bloky a Rozvržení webu.

HTML struktura a css styly

Pro jednotlivé části webu využijeme bloky header (hlavička), nav (navigační menu), article (článek - vlastní obsah, který může být členěn pomocí section), footer (patička), případně aside (postranní panel) a div (obecný blok - obsahující jednotlivé čácti).

Styly pro různá zařízení můžeme zapsat do jednoho css souboru nebo je rozdělit do samostatných souborů (ve značce link pak můžeme přidat parametr media).

Meta značkou určíme výchozí nastavení viewportu (neresponzivní stránky bez této meta značky jsou na mobilech zmenšeny tak, aby se vešly na displej, text však bývá velmi malý).

<meta name="viewport" content="width=device-width, initial-scale=1">

Ukázka HTML struktury

<!doctype html>
<html>
  <head>
    <title>Sloupcový layout</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="basic.css">
    <link rel="stylesheet" media="screen and (min-width:600px)
          and (max-width:1023px)" href="media-600.css">
    <link rel="stylesheet" media="screen and (min-width:1024px)" 
          href="media-1024.css">
  </head>
  <body>
    <div>
      <header></header>
      <nav>
      </nav>
      <article>

      </article>
      <footer></footer>
    </div>
  </body>
</html>

Proměnlivé rozvržení webové stránky - uspořádání bloků tvořících layout

Bloky, které jsou v html kódu zapsány za sebou, lze pomocí css stylů umístit vedle sebe i pod sebou:

Ukázka

nav
30%

article
70%

nav 100%

article
100%

První obrázek ukazuje uspořádání stránky na počítači, druhý na mobilu.

Bloky, které jsou vnořeny v nějakém bloku, mohou tento obalovací blok vyplnit zcela nebo jen částečně:

Ukázka

article
100%

Obrázek vlevo nahoře ukazuje uspořádání stránky na počítači, pod ním je uspořádání na menším notebooku, obrázek vpravo nahoře představuje uspořádání na tabletu, pod ním na mobilu.

Proměnlivé uspořádání obsahu webové stránky - responzivní sloupce

Text article nebo odkazy v nav vytvoříme také responzivní, tzn. s proměnlivou šířkou zadanou v % a s přizpůsobením jejich počtu vedle sebe.

Ukázka

article 100%, section width 32.33332% + 0.5% margin

article 100%, section 100%

article 100%, section width 33.33332% + 0% margin

Obrázek vlevo ukazuje uspořádání stránky na počítači, vpravo je uspořádání na mobilu.

Sloupce mohou být vyznačeny barvou pozadí, případně rámečkem a s mezerami mezi sebou. Nebo mohou být bez mezer se svislou čarou mezi sebou.

Vždy je potřeba zadat ve sloupcích vnitřní odsazení textu. Pokud bude odsazení zadáno v px, je třeba zadat box-sizing: border-box;