Izgled fluida
Tekući raspored je vrsta web stranica dizajn u kojem izgled stranice mijenja veličinu kao prozor veličina se mijenja. To se postiže definiranjem područja stranice pomoću postotaka umjesto fiksnih piksela širine.
Većina izgleda web stranica uključuje jedan, dva ili tri stupca. U ranim danima web dizajn, kada bi većina korisnika imala slične veličine zaslona, web programeri dodijelili bi stupcima fiksne širine. Na primjer, fiksni raspored može obuhvaćati glavno područje sadržaja koje je široko 960 piksela s tri stupca širine 180 piksela, 600 piksela i 180 piksela. Iako bi ovaj izgled mogao izgledati sjajno na zaslonu 1024x768, na zaslonu 1920x1080 mogao bi izgledati malo i ne bi se uklopio na zaslon 800x600.
Tekući rasporedi rješavaju ovaj problem pomoću postotaka kako bi definirali svako područje izgleda. Na primjer, umjesto stvaranja područja sadržaja od 960px, a web developer može stvoriti izgled koji ispunjava 80% zaslona, a tri stupca mogu zauzimati 18%, 64% i 18%. Korištenjem postotaka sadržaj se može proširiti ili smanjiti kako bi odgovarao prozoru korisničkog računala. The CSS koji se koristi za stvaranje fiksnog izgleda u odnosu na fluidni prikaz prikazan je u nastavku.
| Fiksni izgled | Izgled fluida |
|---|---|
|
.content {širina: 960px; } .lijevo, .desno {širina: 180px; } .middle {širina: 600px; } |
.content {širina: 80%; } .lijevo, .desno {širina: 18%; } .middle {širina: 64%; } |
CSS klase u primjerima mogu se dodijeliti divu unutar stranice HTML gdje je .lijevo, .pravoi .srednji razredi su zatvoreni unutar .sadržaj razred. Klasa sadržaja također se može dodijeliti tablici, a ostale klase ćelijama tablice. Fiksna širina .sadržaj klasa ne zahtijeva definiranu širinu jer automatski obuhvaća širinu priloženih div-ova ili ćelija tablice.
Izgled fluida u odnosu na reaktivni dizajn
Izrazi "raspored fluida" i "responzivni web dizajn"ponekad se koriste naizmjenično, ali to su dvije različite stvari. Stranica stvorena pomoću responzivnog web dizajna uključuje CSS medijske upite koji učitavaju različite stilove ovisno o širini prozora ili vrsti uređaja koji se koristi za pristup stranici. Responzivni web dizajn zahtijeva više CSS-a (a ponekad i JavaScript) od osnovnog fluidnog izgleda, ali pruža i veću kontrolu nad izgledom stranice.