A fluid format is a sort of webpage design through which format of the web page resizes because the window measurement is modified. This is achieved by defining areas of the web page using percentages as a substitute of mounted pixel widths.
Most webpage layouts embrace one, two, or three columns. In the early days of net design, when most customers had comparable display sizes, net builders would assign the columns mounted widths. For instance, a hard and fast format could embrace a predominant content material space that’s 960px huge with three columns which have widths of 180px, 600px, and 180px. While this format may look nice on a 1024×768 display, it would look small on a 1920×1080 display and wouldn’t match on a 800×600 display.
Fluid layouts resolve this drawback through the use of percentages to outline every space of the format. For instance, as a substitute of making a content material space of 960px, a net developer can create a format that fills 80% of the display and the three columns may take up 18%, 64%, and 18% respectively. By using percentages, the content material can increase or shrink to suit the window of the person’s laptop. The CSS used to create a hard and fast format vs a fluid format is proven beneath.
| Fixed Layout | Fluid Layout |
|---|---|
|
.content material { width: 960px; } .left, .proper { width: 180px; } .center { width: 600px; } |
.content material { width: 80%; } .left, .proper { width: 18%; } .center { width: 64%; } |
The CSS lessons within the examples may every be assigned to a div inside a web page’s HTML the place the .left, .proper, and .center lessons are enclosed inside the .content material class. The content material class is also a assigned to a desk and the opposite lessons may very well be assigned to desk cells. The mounted width .content material class doesn’t require an outlined width because it mechanically spans the width of the enclosed divs or desk cells.
Fluid Layout vs Responsive Design
The phrases “fluid layout” and “responsive net design” are generally used interchangeably, however they’re two various things. A web page created using responsive net design contains CSS media queries, which load completely different types relying on the width of the window or the kind of device used to entry the web page. Responsive net design requires more CSS (and generally JavaScript) than a primary fluid format, nevertheless it additionally offers more management over format of the web page.
Looking to know more Internet Terms