#1 K čemu slouží
Respozivní design je takový design, který se automaticky přizpůsobuje zařízení, na kterém je právě zobrazován – obsah se zmenšuje nebo naopak zvětšuje, mění se viditelné obrázky, navigace a další.
Respozivní design se z většiny rozděluje na tři části – flexibilní strukturu, flexibilní obrázky a Media Queries.
#2 Části responzivity
Flexibilní struktura
Základem každé flexibilní struktury je mimo jiné nastavit správně metadata viewport, která definují poměr pixelů oproti fyzickému pixelu na obrazovkách. Díky tomu bude na každé obrazovce, nehledě na její rozlišení nebo velikost, jeden pixel vždy stejně široký.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Druhou součásti je také používání dynamických rozměrů – procent nebo výšky a šířky displeje. Pokud prvku nastavíme šířku na 50 %, bude se vždy rozpínat na 50 % obrazovky, ať už se jedná o mobil nebo notebook.
Výška a šířka displeje jsou definovány jednotkami vw a vh, přičemž se fakticky jedná o procenta, avšak tyto dvě jednotky se vztahují pouze na celou obrazovku, zatímco procento se může vztahovat jen na prvek-rodiče.
<p style="width: 50%;">Odstavec textu</p>
<p style="width: 80vw;">Odstavec textu</p>
Flexibilní obrázky
Flexibilní obrázky jsou prakticky podskupinou flexibilní struktury – jedná se o obrázky, které se přizpůsobují stejně jako samostatná struktura.
Kvůli tomuto se neuvádí šířka a výška obrázku přímo v prvku (i když tam ta možnost je), ale pomocí stylů, jelikož v atributu v prvku nefungují procenta. Následující kód vykreslí obrázek na celou výšku obrazovky – a to jak na mobilu, tak i na PC či notebooku.
<img style="height: 100%;">
Často se využívá také vlastnost max-widht nebo max-height, které definují maximální rozměr obrázku – obrázek může mít maximálně daný rozměr, ale může být také menší. Opakem je min-widht a min-height.
<img style="max-height: 70%;">
Druhou možností flexibilních obrázků je obrázky zobrazovat a schovávat na základě výšky či šířky zařízení. Toho lze docílit pomocí prvku <picture>. První prvek (či prvky – může jich být více) je <source>, který definuje obrázky pro různé rozměry a jeden, poslední, prvek <img>, který funguje jako záloha.
<picture>
<source srcset="mesto_cast.jpg" media="(max-width: 700px)">
<source srcset="panorama_mesta.jpg" media="(max-width: 1400px)">
<img src="mesto.jpg" alt="Pohled na město">
</picture>
Media Queries
Jedná se o součást CSS, díky které lze měnit styly podle šířky nebo výšky obrazovky. Lze tak například měnit barvy navigace, statickou velikost (px, em, rem) písma, rozložení stránky… podle toho na jakém zařízení se uživatel dívá.