Co je Fluid Layout?
Plynulé rozvržení je typ webové stránky, při kterém se mění velikost rozvržení stránky podle toho, jak se mění velikost okna. Toho je dosaženo definováním oblastí stránky pomocí procent namísto pevných šířek pixelů.
Většina rozvržení webových stránek obsahuje jeden, dva nebo tři sloupce. V počátcích webového designu, kdy měla většina uživatelů podobnou velikost obrazovky, přiřazovali tvůrci webových stránek sloupcům pevnou šířku. Pevné rozvržení může například zahrnovat hlavní obsahovou oblast širokou 960px se třemi sloupci, které mají šířku 180px, 600px a 180px. Zatímco toto rozložení může vypadat skvěle na obrazovce 1024×768, na obrazovce 1920×1080 může vypadat malé a na obrazovku 800×600 se nevejde.
Plynulá rozložení tento problém řeší tím, že k definování jednotlivých oblastí rozložení používají procenta. Například místo vytvoření oblasti obsahu o velikosti 960px může vývojář webu vytvořit rozložení, které vyplní 80 % obrazovky, a tři sloupce mohou zabírat 18 %, 64 % a 18 %. Pomocí procent může obsah zvětšit nebo zmenšit tak, aby se přizpůsobil oknu počítače uživatele. CSS použité k vytvoření pevného rozvržení oproti plynulému rozvržení je uvedeno níže.
| Fixed Layout | Fluid Layout |
|---|---|
| .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 by mohly být každá přiřazena divům v rámci HTML stránky, kde třídy .left, .right a .middle jsou uzavřeny ve třídě .content. Třída content by také mohla být přiřazena tabulce a ostatní třídy by mohly být přiřazeny buňkám tabulky. Třída .content s pevnou šířkou nevyžaduje definovanou šířku, protože automaticky pokrývá šířku uzavřených divů nebo buněk tabulky.
Plynulé rozvržení vs. responzivní design
Termíny „plynulé rozvržení“ a “ responsive web design“ se někdy používají zaměnitelně, ale jsou to dvě různé věci. Stránka vytvořená pomocí responzivního webového designu obsahuje dotazy médií CSS, které načítají různé styly v závislosti na šířce okna nebo typu zařízení použitého k přístupu na stránku. Responzivní webový design vyžaduje více CSS (a někdy JavaScript) než základní fluidní rozvržení, ale také poskytuje větší kontrolu nad rozvržením stránky.
Definice Fluid Layout na této stránce je původní definice na SharTec.eu. Pokud chcete na tuto stránku odkázat, nezapomeňte uvést zdroj článku.
Cílem webu SharTec.eu je srozumitelně vysvětlit počítačovou terminologii. Snažíme se o jednoduchost a přesnost každé definice, kterou zveřejňujeme. Pokud máte připomínky k definici jazyka Rozložení tekutin nebo chcete navrhnout nový technický termín, kontaktujte nás.
Cieľom stránky SharTec.eu je vysvetľovať počítačovú terminológiu zrozumiteľným spôsobom. Pri každej uverejnenej definícii sa snažíme o jednoduchosť a presnosť. Ak máte pripomienky k definícii jazyka Rozložení tekutin alebo chcete navrhnúť nový technický termín, kontaktujte nás.