Układ płynny

Układ płynny to rodzaj projektu strony internetowej, w którym układ strony zmienia rozmiar wraz ze zmianą rozmiaru okna. Osiąga się to przez definiowanie obszarów strony za pomocą wartości procentowych zamiast stałych szerokości w pikselach.

Większość układów stron internetowych zawiera jedną, dwie lub trzy kolumny. Na początku rozwoju projektowania stron internetowych, gdy większość użytkowników miała ekrany o podobnych rozmiarach, twórcy stron przypisywali kolumnom stałe szerokości. Na przykład układ stały może zawierać główny obszar treści o szerokości 960px oraz trzy kolumny o szerokościach 180px, 600px i 180px. Taki układ może wyglądać świetnie na ekranie o rozdzielczości 1024x768, ale może wyglądać na mały na ekranie o rozdzielczości 1920x1080 i nie zmieścić się na ekranie o rozdzielczości 800x600.

Układy płynne rozwiązują ten problem, wykorzystując wartości procentowe do definiowania każdego obszaru układu. Na przykład zamiast tworzyć obszar treści o szerokości 960px, twórca stron internetowych może utworzyć układ zajmujący 80% ekranu, a trzy kolumny mogą zajmować odpowiednio 18%, 64% i 18%. Dzięki użyciu wartości procentowych treść może się powiększać lub zmniejszać, aby dopasować się do okna komputera użytkownika. Kod CSS używany do utworzenia układu stałego i układu płynnego przedstawiono poniżej.

Klasy CSS z przykładów można przypisać do elementów div w kodzie HTML strony, przy czym klasy .left, .right i .middle są umieszczone wewnątrz klasy .content. Klasę content można również przypisać do tabeli, a pozostałe klasy do komórek tabeli. Klasa .content ze stałą szerokością nie wymaga zdefiniowania szerokości, ponieważ automatycznie rozciąga się na szerokość zawartych w niej elementów div lub komórek tabeli.

Układ płynny a projektowanie responsywne

Terminy „układ płynny” i „responsywne projektowanie stron internetowych” są czasami używane zamiennie, ale oznaczają dwie różne rzeczy. Strona utworzona z użyciem responsywnego projektowania stron internetowych zawiera zapytania medialne CSS, które wczytują różne style w zależności od szerokości okna lub rodzaju urządzenia używanego do uzyskania dostępu do strony. Responsywne projektowanie stron internetowych wymaga więcej kodu CSS, a czasami także JavaScript, niż podstawowy układ płynny, ale zapewnia również większą kontrolę nad układem strony.