About responsive layouts

Before we talk about the responsive layout, we first comb the layout of the whole page in the page design, the main types are as follows:

　　Layout type

　　Layout implementation

How to implement layout design, there are different ways, based on the page implementation units, there are four types: fixed layout, switchable fixed layout, flexible layout, mixed layout.

1. fixed layout: pixel as the basic unit of the page, regardless of the device screen and browser width, only design a set of dimensions;
2. switchable fixed layouts: the same pixel as the page unit, referring to the mainstream device size, design several sets of different widths of layout. Select the most appropriate width layout by setting a different screen size or browser width;
3. Flexible layout: as a percentage of the basic unit of the page, you can adapt to a certain range of equipment screen and browser width, and the perfect use of effective space to show the best results;
4. Mixed layout: similar to the elastic layout, can adapt to a range of devices screen and browser width of all sizes, and the perfect use of effective space to show the best effect; just blend pixels, and percent units as page units.

switchable fixed layouts, flexible layouts, and mixed layouts are the responsive layouts that can be used today: where the fixed layout can be switched to the lowest cost, but the extensibility is poor, and the elastic layout and the mixed layout effect is responsive, it is a more ideal way to implement the responsive layout. Only for the different types of page layout implementation of the responsive design, need to adopt the implementation of the use of the way. The layout of the banner and the sub-structure is flexible, but for the non-uniform multi-column structure, it is often necessary to adopt the hybrid layout method.

　　Layout response

The responsive design of the page requires a different width layout design for the same content, in two ways: desktop first (starting from the desktop), mobile first (from the mobile side);

Regardless of the design that is based on that pattern, to be compatible with all devices, the layout response inevitably requires some change in the layout of the module (the tipping point of a layout change is called a breakpoint),

We use JS to get the screen width of the device, to change the layout of the page, this process we can call the layout response screen. There are several common ways to do this:

　　Layout is the same, that is, the overall module layout of the page does not change, mainly:

• Contents of the module: extrusion-stretching;
• contents of module: line wrapping-tiling;
• contents of module: limitation-increase;

　　Layout changes, that is, the overall module layout changes in the page, mainly:

• Module position transformation;
• Module display mode change: hide-unfold;
• Number of modules changed: deletion-increase ;

In many cases, a single-mode layout response does not satisfy the desired effect and requires a combination of multiple combinations, but in principle it is as simple and lightweight as possible, and maintains uniform logic within the same breakpoint (the tipping point of the layout change is called a breakpoint). Otherwise, the page is too complex to implement and can affect the overall experience and page performance.

Reproduced!

About responsive layouts