Flytande layout
En flytande layout är en typ av webbsida design i vilken layout på sidan ändras som fönster storlek ändras. Detta uppnås genom att definiera områden på sidan med hjälp av procentsatser istället för fasta bildpunkt bredder.
De flesta webbsidlayouter innehåller en, två eller tre kolumner. I början av webbdesign, när de flesta användare hade liknande skärmstorlekar, skulle webbutvecklare tilldela kolumnerna fasta bredder. Till exempel kan en fast layout innehålla ett huvudinnehållsområde som är 960 pixlar brett med tre kolumner som har bredderna 180 pixlar, 600 pixlar och 180 pixlar. Även om denna layout kan se bra ut på en 1024x768 skärm, kan den se liten ut på en 1920x1080 skärm och passar inte på en 800x600 skärm.
Vätskelayouter löser detta problem med hjälp av procentsatser för att definiera varje layoutområde. Till exempel, istället för att skapa ett innehållsområde på 960 pixlar, a webbutvecklare kan skapa en layout som fyller 80% av skärmen och de tre kolumnerna kan ta upp 18%, 64% respektive 18%. Genom att använda procentsatser kan innehållet expandera eller krympa så att det passar fönstret på användarens dator. De CSS används för att skapa en fast layout mot en flytande layout visas nedan.
| Fast layout | Flytande layout |
|---|---|
|
.innehåll {bredd: 960 pixlar; } .vänster, .höger {bredd: 180px; } .middle {bredd: 600px; } |
.innehåll {bredd: 80%; } . vänster, .höger {bredd: 18%; } .middle {bredd: 64%; } |
CSS-klasserna i exemplen kan tilldelas var och en till en div inom en sidas html där .vänster, .rättoch .mitten klasser är inneslutna i .innehåll klass. Innehållsklassen kan också tilldelas en tabell och de andra klasserna kan tilldelas tabellceller. Den fasta bredden .innehåll klass kräver inte en definierad bredd eftersom den automatiskt spänner över bredden på de bifogade divs eller tabellceller.
Fluid Layout vs Responsive Design
Termerna "flytande layout" och "responsiv webbdesign"används ibland omväxlande, men de är två olika saker. En sida som skapats med responsiv webbdesign inkluderar CSS-mediefrågor som laddar olika stilar beroende på fönstrets bredd eller vilken typ av enhet som används för att komma åt sidan. Responsiv webbdesign kräver mer CSS (och ibland JavaScript) än en grundläggande flytande layout, men det ger också mer kontroll över layout av sidan.