html - 固定布局、流体布局、 flex 布局和响应式布局之间有什么区别

Question

你能详细说说两者之间的区别吗

固定布局、流体布局、 flex 布局与响应式布局

Answer 1

我会尝试解释这本书 "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, i.e. pictures adapt to the available space.