V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola sedmá – responzivní design

Responzivní design

Jen pro pořádek. Responzivním designem je myšlena úprava webové šablony pro různá rozlišení obrazovek.

Naše šablona je z velké části responzivní, ale ne všude. Dalším a asi už i posledním krokem bude podívat se na to, jak šablonu upravit pro mobilní a jiná zařízení.

Velice pěkný nástroj pro práci s responzivní šablonou je v prohlížeči Mozilla (Nástroje – Vývoj webu – Responzivní design). Nástroj se dá spustit klávesovou zkratkou Ctrl+Shift+M.

Pokud budeme měnit velikost okna v naší šabloně (tahem z pravé strany okna nástroje), zjistíme, že problém máme až od rozlišení 1120px na šířku.

Vyřešíme to luxusně díky css dotazu na media. Jednoduše ve style.css pokračujeme a vložíme toto:

@media (max-width: 1120px) {
  .sekce .nadpis {
    top: 40px;
    left:  30%;
  } 
}

Díky této srandě máme klid až do rozlišení zhruba 840px, kdy se nám může začít překrývat text.

V této chvíli je ideální vše vyřešit tak, abychom měli klid až do cílového rozlišení 360px na šířku. Což je dle nástroje pro vývojáře od Google optimální šířka pro mobilní zařízení a tedy i náš cíl.

Nejlepší je nastavit procentuální délku a relativní umístění, tak, aby se vše měnil samo. Další možností, je neustále posouvat a centrovat elementy podle toho jak se kde střetávají tím, že přidáváme další a další dotazy na media.

Toto řešení není úplně nejhorší, někdy i nezbytné, ale zdlouhavé. V tomto případě se mu naštěstí můžeme vyhnout, ale bude třeba přenastavit většinu elementů v obsahu a hlavičce webu.

Začneme postupně:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  
}

Pokud to budeme brát odshora dolů. První je na řadě poutač. Sice se zdá, že nám nevadí, ale ve skutečnosti je třeba pro vertikální obtékání v tomto případě upřednostnit text nad obrázky. Poutač měl do teď výchozí relativní pozici a obsah pod ním se přibližoval k záhlaví dle toho, jak se poutač zmenšoval, až obsah překryl absolutní nadpis.

Dalším krokem, jak jsem napověděl je nastavení nadpisu na relativní pozici.

Následující příkazy vložit do media:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  #nadpis {
    position: relative;
    top: 0;
    left: 0;
    margin: auto; 
    margin-top: 80px;
  }       
  #nadpis h1, #nadpis p {
    margin-left: 20px;
  }
  #nadpis p, .nadpis p {
    max-width: 500px;
    width: 90%;
  }
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  }
}

Ve skutečnosti, jak vám určitě po zhlédnutí víše uvedeného kódu došlo, tak problémů bylo více.

Nadpis bylo třeba po odsadit o 80px a hlavně u obsahu nastavit obtékání a tedy i délka. Zapomenout se nesmělo ani na odstavce a nadpisy druhé úrovně.
Když tak můžete postupně zadávat příkazy a koukat co se změnilo.

Hotoví však stále nejsme.
Zápatí se nějak nekamarádí s obtékajícím obsahem, takže jej také musíme nechat obtékat.
Doplníme do media a nastavíme okraje i obtékání:

  }          
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  } 
  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }
}

Zápatí už se kamarádí s obsahem, ale jednotlivé sekce nikoli. Tak se musíme podívat ještě na sekce v obsahu a rovnou si je připravíme i pro ta nejnižší rozlišení.

  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }           
  .sekce .nadpis {
    top: 40px;
    left:  5%;
  }                    
  .sekce img {
    min-width: 350px; 
  }
}

Zdánlivě hotovo.

Problémy však můžou nastat, pokud budeme měnit délky obsahů. Dále si můžete hrát i s velikostí nadpisů a dalším nastavením. Oboje nechám už na vás.

Jen na závěr nezapomenout na jednu důležitou maličkost. Aby stránky opravdu fungovali i v mobilních zařízeních tak, jak jsme nastavili, je třeba nastavit viewport. Což se dělá v index.html v hlavičce head.

Jednoduše doplníte toto:

  <head>    
    <meta charset="utf-8">
    <title>Moje šablona</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styly/style.css">
  </head>

To je ode mě vše. Pokud jakékoli dotazy, tak piště. Pokusím se odpovědět.
Děkuji za vaši přízeň.

---

Soubory z lekce ke stažení: lekce-7.zip