Úvod do responzivního designu v CSS

V moderním světě musí webová stránka správně zobrazovat na zařízeních s různými velikostmi obrazovky.

Zařízení se obvykle rozdělují do čtyř tříd: počítače (desktop), notebooky, tablety (tablet) a telefony (mobile).

Dříve, za starých časů, existovaly známé oblíbené velikosti obrazovek všech zařízení, naštěstí jich nebylo tolik. A weby se vytvářely tak, aby se správně zobrazovaly na známém seznamu rozlišení.

V současné době je zařízení tolik, že není možné sestavit seznam rozlišení, pro která je potřeba web vytvořit. Nyní se má za to, že layout by se měl správně zobrazovat na obrazovce jakékoli velikosti.

Toho je dosaženo přeskupením bloků v klíčových bodech layoutu. Tyto klíčové body se přitom nevybírají pro konkrétní zařízení, ale podle obsahu webu - tak, aby vypadal dobře.

Mezi klíčovými body by šířka prvků webu měla být pružná, aby se přizpůsobila šířce obrazovky. A v klíčových bodech dochází k přeskupení bloků do jiných pozic.

Popsaný layout se nazývá adaptivní nebo responzivní (responsive). Jeho studiem se budeme zabývat v následujících lekcích.