Question 10: what is your understanding of static layout, adaptive layout, responsive layout, elastic layout and flow layout?


Static layout

  • Description: the set length and width will not change. No matter how big your screen is, it is so large and the resolution will not change

  • Advantages: This is the simplest layout method for developers, and there is no compatibility problem

  • Disadvantages: when the screen resolution is too low, scroll bars will appear

  • Scenario: traditional web site

Adaptive layout

  • Description: keep the original display mode under different screen resolutions. That is, the position of the element will change, but the size will not change

  • Advantages: the page can be compatible with devices with different resolutions

  • Disadvantages: the screen is too small, and the content will be too crowded. All devices look like the same website, but the length or pictures become smaller, and different display styles will not be adopted according to the device

  • Scenario: traditional web site

Responsive layout

  • Description: the display mode is different under different screen resolutions

  • Advantages: a set of code is compatible with web, tablet and mobile web pages

  • Disadvantages: heavy workload, UI design also requires multiple versions

  • Scenario: compatible with many different devices at the same time

Flexible layout (EM / REM layout)

  • Description: use em or REM units for relative layout. Under different screen resolutions, the height and width of all elements of the page are scaled equally

  • Advantages: the aspect ratio of all screens is the same as that of the original design, or the difference is not much, which is perfectly suitable

  • Disadvantages: this layout is only adaptive in width, but not in height

  • Scenario: compatible with many different devices at the same time

Flexible layout (Flex layout)

  • Description: a popular layout at present. It is difficult to realize some complex layouts using traditional layouts, and it becomes very easy to realize them using flex layouts

  • Advantages: simple, complete and responsive implementation of various page layouts

  • Disadvantages: only ie10 + compatible browsers

  • Scene: three column layout, vertical and horizontal center layout

Streaming layout (percentage layout)

  • Description: the width of page elements is adjusted according to the screen resolution, but the overall layout remains unchanged. The main feature is that it flows down like a waterfall and has a regular infinite traversal module.

  • Advantages: flexible and make full use of the browser space

  • Disadvantages: the width is adapted and adjusted according to the screen. For the large screen, the user experience is not particularly good, and some layout elements will appear very long

  • Scene: tiktok, micro-blog news, WeChat circle, etc.

The content / inspiration of the article is drawn from the following content