Responzivní webdesign je specifický způsob stylování HTML dokumentů, které zobrazuje stránky optimalizované pro všechny druhy nejrůznějších zařízení (mobily, tablety atd.). Vlastnost Media Queries rozpoznává vlastnosti zařízení, na kterém je stránka zobrazena a přizpůsobí tak všechny prvky stránky těmto vlastnostem. Vlastnost Media Queries je zahrnuta ve specifikaci CSS3. Responzivní webdesign má tři základní úrovně: Flexibilní struktura, Flexibilní obrázky a již zmiňovaná Media Queries.

Flexibilní struktura

Flexibilní struktura se dosahuje stylováním na základě procentuálních hodnot prvků. Šířky prvků se udávají v procentech, nikoliv v pixelech. Šířky prvků se tak vypočítávají podle zjištěné šířky zařízení, na kterém je stránka prohlížena. Pomocný vzorec pro výpočet procentuální hodnoty prvku vzhledem k dané šířce je:

šířka (%) = ( šířka (v pixelech) / blok (v pixelech)) *100.

Blok je obalový tag prvku, kterému šířku vypočítáváme. Nejpřesnějšího výsledku dosáhneme, když nebudeme vypočtené procentuální hodnoty zaokrouhlovat.

Flexibilní obrázky

Aby se obrázky přizpůsobovaly, je potřeba neuvádět šířku a výšku obrázku u tagu img. Obrázky se tak stylují následujícím kódem

<img src="" style="max-width: 100%; height: auto;">, aby nedocházelo k přetékání obrázků a přizpůsobovaly se obrazovce jednotlivých zařízení.

Media Queries

Poslední úrovní responsive webdesignu je založená na rozpoznávání šířky stránky v aktuálním zobrazení a použití stylů, které této šířce přísluší. Příkladem je následující případ pro zařízení, které mají šířku zobrazení v následujícím rozmezí. Píšeme jen ty hodnoty, které jsou nové nebo se mění, aby nedocházelo k duplikování stejných hodnot.

[clanky/screen-css.png]

Viewport

Toto nastavení říká prohlížeči, jak má rozmístit obsah na displej a informuje prohlížeč o tom, že stránka je optimalizovaná pro dané zařízení. Podle zápisu jde jednoduše odvodit, že se jedná o metatag. Metatagy se zapisují do hlavičky v šabloně.

[clanky/viewport-template-head.png]

"device-width": Ne všechny telefony mají přesně rozměr, který zadáme v pixelech, takže je lepší zadat device-width a nechat prohlížeč, aby se postaral o zbytek. "user-scalable=no": Povoluje zoom, tedy něco, co může být žádoucí na webu, ale ne v aplikaci. Můžeme tomu zabránit pomocí "user-scalable=no" nebo omezit zoom na určitou hodnotu (initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0)


Doporučené úpravy pro zařízení s menším rozlišením.

  • zmenšení okrajů a mezer. Na malém displeji je prostor velmi cenný!
  • odstranit efekty :hover
  • odstranit box-shadow okolo hlavního kontejnerového div-u. Stíny u velkých boxů snižují výkon při zobrazování.
  • odstranit změny opacity. Změna průhlednosti na mobilním zařízení je poměrně náročná záležitost.