Co to znamená, když je web responzibilní? Jak poznáme, že responzibilní je?

Tento pojem je spjat se širokým spektrem zařízeních, na kterých si v dnešní moderní době můžeme webovou stránku zobrazit. To nejčastěji zahrnuje chytrý telefon, tablet, notebook a i nějaký monitor, klidně i CRT, připojený ke stolnímu počítači. Právě mezi v tomhle případě je ten nejdůležitější rozdíl. Před 20 lety byly chytré telefony a tablety v menšině, veškeré monitory byly ve formátu 4:3. Vývojář webu se při nejhorším staral jen o to, pro jaké prohlížeče bude své webové stránky optimalizovat. 

Dnes se spíš než na prohlížeč vývojáři soustřeďují na fyzické zařízení, na kterých si uživatelé budou stránky prohlížet, protože každé z nich má rozdílné zobrazovací rozměry.

Responzibilita stručně řečeno zajišťuje čitelné zobrazení stránky na jakkoliv velké obrazovce.

respo

Pomocí čeho se to zajišťuje?

Je více způsobů, jak zajistit responzibilní chování stránky. Nejčastější řešení je pomocí frameworků Bootstrap nebo W3.CSS. Oba dva frameworky ale využívají tzv. dotazy na média, jenž jsou jednou z nejdůležitějších novinek CSS3. O těchto frameworcích bude pojednáno v následujících kapitolách. Předtím je potřeba zmínit dvě věci:  

Viewport

Jedná se o metatag (tzn. obsahuje informace pro stránku), který prohlížeči sděluje informace o rozměrech a měřítkách stránky. 

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

width: nastavuje šířku.

initial-scale: nastavuje stupeň přiblížení při prvotním načtení stránky.

Grid systém

Oba dva výše zmíněné frameworky využívají systém rozmisťování obsahu do dvanácti sloupců. Jedná se o ideální číslo, kdy lze vytvořit třetiny, poloviny i čtvrtiny. Můžete se podívat níže.

grid_system

Jedná se o rozvržení, které v kombinací předpřipravených tříd upravuje vykreslení obsahu podle zadaných podmínek. Nejčastěji podle šířky zobrazovací plochy zařízení. 

Naposledy změněno: pondělí, 2. listopadu 2020, 14.27