For more articles see: github.com/elevenbeans…

preface

Another month without more bo, in order to own the first nest continuously rushing about in Suzhou and Shanghai.

Recently, the team had an assignment about sharing the front-end layout, so they seized the opportunity to claim it and summarize it.

About the layout

Basic layout

0. General/document flow layout

1. The Float layoutsfloat: left/right

Originally designed for use in surround layout, but now commonly used in left and right layouts.

2. Absolute layoutposition: absolute.position: fixed

3. Grid layout:display:grid

A systematic layout plan, see: www.w3cplus.com/css/learncs…

4. CSS3 Flex Flex box layout:display:flex

Common layout concepts and implementation methods

0. Static layout

1. Streaming layout

Streaming layout is designed to render the same web page on a full screen on devices of different sizes. It is used to solve the compatibility between different resolutions of similar devices (general resolution differences are less).

Implementation method:

• Allows page width to be automatically adjusted:<meta name="viewport" content="width=device-width, initial-scale=1" />
• Don’t use absolute sizes (including containers/fonts/images), use percentages, EM, REM, VW, VH, etc
• Use flexible boxes like Flex (don’t use PX for sizing)

Advantages: The left and right sides of the page are full.

But the disadvantages are obvious:

• Using the percentage definition, the effect on a large phone /Pad screen (or landscape screen) is that some page elements are pulled very large, but the amount of content remains the same, making it sparse, uncompact and inefficient in space utilization.
• If the text is also enlarged in percentage, the overall effect will be very incongruous (old machine effect).

Here’s an example:
English.ctrip.com/flightsh5/s…(I’m used to overusing this link)

2. Adaptive layout

Adaptive layout defines different layouts for different screen resolutions. Changing the screen resolution allows you to switch between different static layouts (the position of page elements may change), but in each static layout, page elements do not change with window size.

An adaptive layout is considered a collection of static layouts.

Implementation method:

• Static layout method
• Resolution Detector (Media Query/Server-side Detector /UA)

The position of elements in the adaptive layout page will change, which is a good solution to the disadvantage of low utilization of large screen space in the flow layout.

Disadvantages: Single layout containers cannot scale flexibly, and containers are still prone to the problems mentioned in static layouts without triggering layout switches.

Here’s an example:
www.baidu.com/(Thought this would be a difficult example =,=)

3. Responsive layout

Responsive layouts also define layouts for different screen resolutions. Changing the screen resolution allows you to switch between different layouts in real time with CSS Media Query (the position of page elements may change), and within each layout, page elements change size automatically as the window size changes in streaming layout.

Implementation method:

• Fluid layout
• CSS media query

Responsive layout combines the advantages of both streaming and adaptive layout.

Disadvantages: The CSS code is cumbersome and has much redundancy for specific devices. It is suitable for Blog Dos sites that do not have high performance requirements for each terminal (especially the mobile terminal).

Here’s an example:
elevenbeans.github.io/

About Web Design

The purpose of layout, after all, is to serve the purpose of web design. So let’s talk about responsive design (RWD) and adaptive design (AWD).

1. Responsive Design (RWD)

2. Adaptive Design (AWD)

Wikipedia: Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout. The adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout

“All Types of Web Design layouts”, “Different versions to Different Devices”,

The adaptive design is displayed by detecting the device type and selecting the most suitable design layout/size version from different versions of the site. It can be used for all layout schemes, including reactive layouts.

Implementation method:

• server-side detection
• different versions to different devices
  
  For PC: streaming layout available;
  
  For Mobile: Use streaming layout. A Rem solution is recommended:
  • Sets the size of elements (which can include fonts, etc.) torem （remBase elementfont-sizeIs the benchmark unit)
  • JS dynamically set according to screen width<html> 的 font-sizeSize, elements will also be scaled to screen width and so on

Here’s an example:
www.trip.com/

Similarities and differences between RWD and AWD

Similarities:

• All adopt different styles and layouts for different resolutions/devices to achieve optimal page display
• AWD also including Responsive layout

Difference:

• The former emphasizes the multi-terminal compatibility display of the same set of pages, while the latter provides multiple sets of pages and classifies different devices
• The former uses CSS Media Query for resolution detection, which can respond to browser size changes in real time and change element size/layout, while the latter is usually Server Side Detection, which renders the given layout and style at one time

Reference