Pružné rozvržení
Pružné rozvržení je typ návrhu webové stránky, při kterém se rozvržení stránky mění podle toho, jak se mění velikost okna. Toho se dosahuje definováním oblastí stránky pomocí procent namísto pevných šířek v pixelech.
Většina rozvržení webových stránek obsahuje jeden, dva nebo tři sloupce. V počátcích návrhu webů, kdy měla většina uživatelů podobně velké obrazovky, vývojáři webů sloupcům přiřazovali pevné šířky. Pevné rozvržení může například obsahovat hlavní oblast s obsahem širokou 960px a tři sloupce o šířkách 180px, 600px a 180px. I když toto rozvržení může vypadat skvěle na obrazovce s rozlišením 1024x768, na obrazovce s rozlišením 1920x1080 může vypadat malé a na obrazovku s rozlišením 800x600 se nevejde.
Pružná rozvržení tento problém řeší použitím procent při definování jednotlivých oblastí rozvržení. Místo vytvoření oblasti s obsahem široké 960px může například webový vývojář vytvořit rozvržení, které vyplní 80 % obrazovky, přičemž tři sloupce mohou zabírat 18 %, 64 % a 18 %. Díky použití procent se obsah může roztahovat nebo zmenšovat tak, aby se přizpůsobil oknu počítače uživatele. Níže je uvedeno CSS použité k vytvoření pevného a pružného rozvržení.
| Pevné rozvržení | Pružné rozvržení |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
Třídy CSS v příkladech lze přiřadit jednotlivým prvkům div v rámci HTML stránky, přičemž třídy .left, .right a .middle jsou uzavřeny v třídě .content. Třídu content lze také přiřadit tabulce a ostatní třídy buňkám tabulky. Třída .content s pevnou šířkou nevyžaduje definovanou šířku, protože automaticky pokrývá šířku uzavřených prvků div nebo buněk tabulky.
Pružné rozvržení vs. responzivní design
Pojmy „pružné rozvržení“ a „responzivní webový design“ se někdy používají jako synonyma, ale označují dvě různé věci. Stránka vytvořená pomocí responzivního webového designu obsahuje dotazy na média CSS, které načítají různé styly podle šířky okna nebo typu zařízení použitého pro přístup ke stránce. Responzivní webový design vyžaduje více CSS a někdy také (JavaScript) než základní pružné rozvržení, ale poskytuje také větší kontrolu nad rozvržením stránky.
Otestujte své znalosti