Úvod do responzívneho webdesignu v CSS

V dnešnom svete sa od webovej stránky očakáva, že bude dobre vyzerať na zariadeniach s rôznou veľkosťou obrazovky.

Zariadenia sa všeobecne delia do štyroch tried: počítače (desktop), notebooky, tablety (tablet) a telefóny (mobile).

Kedysi, v dávnych časoch, boli známe obľúbené rozlíšenia obrazoviek všetkých zariadení, których nebolo tak veľa. A webové stránky sa vytvárali tak, aby správne zobrazovali na známom zozname rozlíšení.

V súčasnosti je zariadení toľko, že nie je možné vytvoriť zoznam rozlíšení, pre ktoré by sa mala stránka robiť. Dnes sa predpokladá, že layout by mal byť správne zobrazovaný na obrazovke akejkoľvek veľkosti.

To sa dosahuje pretváraním blokov v kľúčových bodoch layoutu. Pritom sa tieto kľúčové body nevyberajú pre konkrétne zariadenia, ale pre obsah stránky - tak, aby vyzeral dobre.

Medzi kľúčovými bodmi by mala byť šírka elementov stránky pružná, aby sa prispôsobila šírke obrazovky. A v kľúčových bodoch dochádza k preskupeniu blokov do iných pozícií.

Opísaný layout sa nazýva adaptívny alebo responzívny (responsive). Jeho štúdiom sa budeme zaoberať v nasledujúcich lekciách.