CODEWITHSUNDEEP
htmlcsslayoutcss-floatfluid-layout
PCA
PCA

Reputation: 1707

What is the difference between Fixed, Fluid, Elastic, and Responsive layouts

Can you please detail me the difference between

Fixed vs. Fluid vs. Elastic Layout vs Responsive layouts

Upvotes: 3

Views: 6041

Answers (2)

KarmaEDV
KarmaEDV

Reputation: 1691

I'll try to paraphrase the book "Responsive Webdesign - A. Ertel, K. Laborenz - Galileo Computing"

Fixed Layout

A layout whose dimensions are expressed in pixels and therefore incapable of adapting to different screen sizes or resolutions. If the screen is too small, a scroll bar will be shown. enter image description here

Fluid & Elastic Layout

A fluid layout is defined in percent of the Viewports. When the window size changes, the dimensions of the layout change accordingly. Texts and pictures keep their size.

A mixform between the fixed and the fluid layout is the elastic layout. The element-widths are expressed in em, which depends on the font size. Therefore the layout does not change when the Window size changes, but rather when the font size changes. In priciple it's the behaviour that most browsers make available through Page Zoom (CTRL+Mousewheel).

enter image description here

Adaptive Layout

The adaptive layout is in principle a fixed version which exists in several versions. Depending on the available screen size it "jumps" through these versions. Between the breakpoint it behaves as a fixed layout.

enter image description here

Responsive Layout

The responsive Layout combines the properties of the fluid and the adaptive layout. It changes heavily upon "breakpoints" and additionally it also stretches like a fluid layout between these breakpoints. It also allows for the content to scale, i.e. pictures adapt to the available space.

enter image description here

Upvotes: 10

SaurabhLP
SaurabhLP

Reputation: 3657

Fluid, Elastic and Responsive Layouts are all same...

Only Fixed Layout is a layout in which you fix the width of the page to a given size e.g. in pixels....

Fluid Layout was width 100% and its elements arrange via the screen resolutions...

Responsive means webpage elements arrange via the screen resolutions...

Check out this sample thats fluid:-

  1. Fluid Sample
  2. Responsive

Reference:- Twitter Bootstrap

Upvotes: -2

Related Questions