Rozložení tekutin

Plynulé rozložení je typ webové stránky design, ve kterém se rozložení stránky změní jako okno velikost je změněna. Toho je dosaženo definováním oblastí stránky pomocí procenta místo pevných pixel šířky.

Většina rozvržení webové stránky obsahuje jeden, dva nebo tři sloupce. V počátcích roku web design, když většina uživatelů měla podobné velikosti obrazovky, weboví vývojáři přiřadili sloupcům pevné šířky. Například pevné rozvržení může zahrnovat hlavní oblast obsahu o šířce 960 pixelů se třemi sloupci, které mají šířky 180 pixelů, 600 pixelů a 180 pixelů. I když toto rozložení může vypadat skvěle na obrazovce 1024x768, na obrazovce 1920x1080 může vypadat malé a na obrazovku 800x600 se nevejde.

Tekutá rozvržení řeší tento problém pomocí procenta k definování každé oblasti rozvržení. Například místo vytvoření oblasti obsahu 960px, a webový vývojář může vytvořit rozložení, které vyplní 80% obrazovky a tři sloupce mohou zabírat 18%, 64% a 18%. Pomocí procent se obsah může zvětšit nebo zmenšit tak, aby se vešel do okna počítače uživatele. The CSS slouží k vytvoření pevného rozvržení vs. plynulé rozvržení je uvedeno níže.

Třídy CSS v příkladech lze každý přiřadit divu na stránce HTML kde .vlevo, odjet, .že jo, a .střední třídy jsou uzavřeny v rámci .obsah třída. Třídu obsahu lze také přiřadit k tabulce a ostatní třídy lze přiřadit k buňkám tabulky. Pevná šířka .obsah třída nevyžaduje definovanou šířku, protože automaticky překlenuje šířku uzavřených divů nebo buněk tabulky.

Plynulé rozložení vs responzivní design

Výrazy „plynulé rozložení“ a „responzivní webdesign„někdy se používají zaměnitelně, ale jedná se o dvě různé věci. Stránka vytvořená pomocí responzivního webového designu zahrnuje dotazy na média CSS, které načítají různé styly v závislosti na šířce okna nebo typu zařízení použitého pro přístup na stránku. Responzivní webový design vyžaduje více CSS (a někdy JavaScript) než základní rozložení tekutin, ale také poskytuje větší kontrolu nad rozložením stránky.