A brief discussion on responsive layout in web design

Before talking about responsive layout, let’s first sort out the overall page layout in web design. The common types are as follows:

　Layout type

　Layout implementation

There are also different ways to implement layout design. Here, based on the page implementation unit, there are four types Type: fixed layout, switchable fixed layout, flexible layout, hybrid layout.

1. Fixed layout: Using pixels as the basic unit of the page, regardless of the device screen and browser width, only one set of sizes is designed;

2. Switchable fixed layout: Also uses pixels as page units and refers to mainstream device sizes to design several sets of layouts with different widths. By setting other screen sizes or browser widths, select the most appropriate width layout;

3. Flexible layout: Using percentage as the basic unit of the page, you can It adapts to device screens and browser widths of all sizes within a certain range, and can perfectly utilize the effective space to show the best effect;

4. Mixed layout: Similar to elastic layout , can adapt to all sizes of device screens and browser widths within a certain range, and can perfectly utilize the effective space to show the best effect; it just mixes pixels, and percentage units as page units.

Switchable fixed layout, flexible layout, and hybrid layout are all responsive layout methods that can be used at present: among them, switchable fixed layout The implementation cost is the lowest, but the scalability is relatively poor; the elastic layout and hybrid layout effects are responsive, and they are both ideal responsive layout implementation methods. It's just that different implementation methods are needed to implement responsive design for different types of page layouts. Column and equally divided structures are suitable for flexible layout, while non-equally divided multi-column structures often require a hybrid layout implementation.

　Layout response

Implementing responsive design on the page requires layout design of different widths for the same content. Two methods: desktop first (design from the desktop side downwards); mobile first (design from the mobile side upwards);

No matter which mode the design is based on, it must be compatible with all devices, and it is inevitable that the layout will be responsive. We need to make some changes to the module layout (the critical point at which layout changes occur is called a breakpoint).

We obtain the screen width of the device through JS to change the layout of the web page. This process can be called Make the layout responsive to the screen. The common methods are as follows:

The layout remains unchanged, that is, the overall module layout in the page does not change. The main methods are:

• ##Contents in the module: squeeze-stretch;

• Contents in the module: line wrap-tile;

• Contents in the module: Delete - Add;

## 　

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

• Module position change;

• Module display mode change: hide-expand;

• Change in the number of modules: deletion - increase

  ;

## Many times, a single way of layout response cannot meet the ideal effect, and multiple combinations need to be combined. However, in principle, keep it as simple and lightweight as possible, and within the same breakpoint ( The critical point at which layout changes occur is called a breakpoint) to maintain unified logic. Otherwise, the page implementation will be too complex, which will also affect the overall experience and page performance.

The above is the detailed content of A brief discussion on responsive layout in web design. For more information, please follow other related articles on the PHP Chinese website!