固定版，流体版，弹性版与响应版之间有什么区别

Question

Can you please detail me the difference between

Fixed vs. Fluid vs. Elastic Layout vs Responsive layouts

Answer 1

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.

---

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).

---

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.

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, ie pictures adapt to the available space.

Answer 2

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 eg 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