Responzivní design je prvkem, který se objevil před devíti lety. Jeho smyslem je stylování html a CSS dokumentů tak, aby svým vzhledem a funkčností uspokojili uživatele mobilních telefonů, tabletů a všemožných zařízení.

Od pixelů k relativním jednotkám

V první řadě přecházíme od absolutně zadaných rozměrů jako je výška nebo šířka elementu k jednotkám, které tyto rozměry zadávají relativně. Možností je několik a každá má své opodstatnění
·         Procenta
·         Em: relativní vůči velikosti písma na elementu, standardem je 1 em = 16 px, uživatel si však tuto hodnotu může změnit v nastavení prohlížeče, například pokud špatně vidí. Výhodou je, že tato změna nijak neovlivní vzhled stránky a vždy se přizpůsobí.
U obou však platí vzorec pro flexibilní struktury (požadovaná šířka [px]) / (šířka parent elementu [px]) = velikost [em]. Pokud jej vynásobíme 100, dostaneme procentuální hodnotu. Přecházíme také ze všech parametrů width k max-width.  

Nastavení obrazovky pomocí meta-tagů

V rámci hlavičky souboru html, můžeme odkázat pomocí meta tagu link (tedy tag, který obvykle používáme pro připojení css souboru) s atributem media na různé soubory. Zde si také lze zvolit minimální a maximální šířku obrazovky v pixelech, kdy se nám tyto stylovací soubory použijí.

CSS Media Queries

Stejného efektu jako u meta tagů můžeme dosáhnout i v CSS souboru pomocí kódu
@media (max-width: 1000px) {Zde se píšou klasické selektory}
Tato lze selektivně vymazat určité prvky při zmenšující se šířky okna a tím přizpůsobit stránku pro menší zařízení. Standardní rozměry různých obrazovek lze dohledat na internetu a výslednou stránku je nejlepší vyzkoušet na těchto zařízeních nebo skrze příslušné internetové stránky.

Flexibilní obrázky

Nejlepší je si nastylovat všechny obrázky s max-width: 100 % a height: auto. Tím zaručíme, že se budou vždy pohybovat v hranicích svého obalovacího elementu.