Responzivita je dnes standardem moderního webu. Místo vytváření samostatných verzí webu pro mobily (např. m.facebook.com) se používá jeden kód, který se díky technologiím CSS „přeskládá“ podle aktuální šířky okna prohlížeče. Cílem je zajistit špičkové UX (uživatelskou zkušenost) bez ohledu na hardware.
Aby byl web skutečně responzivní, musí využívat tyto tři principy:
Prvky na stránce nejsou definovány pevně v pixelech, ale v relativních jednotkách (procenta, vw, vh). Pokud se okno zúží o 10 %, zúží se o 10 % i všechny sloupce.
Obrázky nesmí mít pevnou šířku. Používá se pravidlo max-width: 100%, které zajistí, že se obrázek nikdy „neprotrhne“ ven ze svého kontejneru a zmenší se spolu s ním.
Nejdůležitější technologie, která umožňuje definovat různé styly pro různé šířky displeje. * Příklad: „Pokud je šířka displeje menší než 600 px, skryj boční panel a zobraz menu jako 'hamburger' ikonu.“
Breakpointy jsou body (šířky v pixelech), ve kterých se mění rozvržení stránky. Typické hodnoty jsou:
Moderní přístup se nazývá Mobile First – vývojář nejdříve navrhne nejjednodušší verzi pro mobil a postupně přidává prvky a sloupce pro větší obrazovky.
Často dochází k záměně těchto pojmů:
| Metoda | Princip | Výsledek |
|---|---|---|
| Responzivní | Plynule se mění jako tekutina. | Perfektní na jakékoliv netypické rozlišení. |
| Adaptivní | Má několik pevně daných rozvržení. | „Skočí“ do nové podoby až při dosažení určitého bodu. |
Související pojmy: UX, SEO, Pixel, HTML, Core Web Vitals, CSS, JavaScript.