Układ płynny
Płynny układ to rodzaj strona projekt, w którym układ strony zmienia rozmiar jako okno rozmiar jest zmieniony. Osiąga się to poprzez definiowanie obszarów strony za pomocą procentów zamiast stałych piksel szerokości.
Większość układów stron internetowych zawiera jedną, dwie lub trzy kolumny. We wczesnych dniach projektowanie stron internetowychGdy większość użytkowników miała podobne rozmiary ekranu, twórcy stron internetowych przypisywali kolumnom stałą szerokość. Na przykład stały układ może zawierać główny obszar zawartości o szerokości 960 pikseli z trzema kolumnami o szerokości 180 pikseli, 600 pikseli i 180 pikseli. Chociaż ten układ może wyglądać świetnie na ekranie 1024x768, może wyglądać na mały na ekranie 1920x1080 i nie pasowałby do ekranu 800x600.
Układy płynne rozwiązują ten problem, używając wartości procentowych do zdefiniowania każdego obszaru układu. Na przykład zamiast tworzyć obszar zawartości o rozmiarze 960 pikseli, plik programista internetowy może stworzyć układ, który zajmuje 80% ekranu, a trzy kolumny mogą zajmować odpowiednio 18%, 64% i 18%. Używając wartości procentowych, zawartość może się rozszerzać lub zmniejszać, dopasowując się do okna komputera użytkownika. Plik CSS używany do tworzenia układu stałego w porównaniu z układem płynnym pokazano poniżej.
| Układ stały | Układ płynny |
|---|---|
|
.content {width: 960px; } .left, .right {width: 180px; } .middle {width: 600px; } |
.content {width: 80%; } .left, .right {szerokość: 18%; } .middle {width: 64%; } |
Każda z klas CSS w przykładach może być przypisana do elementu div na stronie HTML gdzie .lewo, .dobrze, .środkowy klasy są zawarte w .zadowolony klasa. Klasa treści może być również przypisana do tabeli, a inne klasy mogą być przypisane do komórek tabeli. Stała szerokość .zadowolony class nie wymaga zdefiniowanej szerokości, ponieważ automatycznie rozciąga się na szerokość zawartych elementów div lub komórek tabeli.
Układ płynny a projektowanie responsywne
Terminy „układ elastyczny” i „responsywny projekt strony”są czasami używane zamiennie, ale są to dwie różne rzeczy. Strona utworzona przy użyciu elastycznego projektowania witryn zawiera zapytania o media CSS, które ładują różne style w zależności od szerokości okna lub typu urządzenia używanego do uzyskania dostępu do strony. Elastyczne projektowanie witryn internetowych wymaga więcej CSS (a czasem JavaScript) niż podstawowy układ płynny, ale zapewnia też większą kontrolę nad układem strony.