In-depth analysis of responsive layout

Concept

Responsive layout is the presentation of responsive design solutions. The specific point is that on different devices, the web page can automatically identify the screen width and display different content according to the display area of ​​the device (generally refers to the screen width, of course, it can also be other, which can be explained in detail below) Effect. The simple point is to design a layout that can be used on both PC and mobile terminals.

How to implement responsive layout?

There are three popular methods

1 and percentage

by setting the width of each box as a percentage.

Advantages: Simple and convenient

Disadvantages: When additional settings of margin and padding, or when using different browsers, the layout will be confusing

2, meta tags

The code segment is:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This is mainly to adapt the code to the mobile screen. Among them, viewport refers to the name read when the meta tag needs to be loaded, which is "viewport", and the width needs to be equal to device. -width (device width) mainly tells the browser to set the width of the layout viewport to the optimal width of the device, and the initial-scale (scaling ratio) is 1, which ensures that the width of the device is obtained when loading. , while maintaining the original size to facilitate media query

3, @media media query

css code snippet is:

@media screen and (min-width: 10rem) and (max-width: 20rem) { ... }

The first screen here means screen , there are many parameters, including all (for all devices), print (for printers and print previews), speech (for screen readers and other sound-generating devices).

Use and to display multiple situations side by side, min-width and max-width to define what size of screen to display, this is the soul of responsiveness.

The above example is the media query screen. The minimum width is 10rem and the maximum width is 20rem. I use the device width to implement styles or other functions within the braces. The rem here can also be replaced with units such as px or em. wait.

Advantages: Most responsive layouts are now implemented using @media. A large number of public styles can be written. When it needs to adapt to the screen, corresponding functions can be added in braces You can achieve responsive layout.

Disadvantages: You may need to write different styles for the same class, the code is more complicated, and the difficulty is also slightly difficult.

Which method is used to implement responsiveness in the application?

No one method is perfect. It is recommended to use three methods alternately and use the appropriate method in the appropriate place.

In the layout process, the percentage of width and media query are generally used interchangeably, and before loading the web page, a meta tag is added to define the content of the viewport, which is more convenient for mobile response. Device compatibility is also taken into consideration.

The general approach to responsive design is to make three or four layouts based on the main types of access devices of the target users. Each layout has a range. For example, the resolution of a small-screen mobile phone can be set to [320,640]. Then just design each layout separately. Generally speaking, each layout mainly adjusts the arrangement order of modules, and the less content adjustment, the better (to minimize user adaptation costs).

Advantages of Responsiveness

Compared with the previous flexible boxes, responsive layout will be better and more proactive in showing different effects according to changes in user equipment. It is more flexible than flexible boxes. Boxes are more flexible and readable. A responsive solution solves the adaptive problems of all devices.

Disadvantages of responsiveness

It is difficult to develop, and the corresponding css files may be multiple or single.

Written at the end, not at the end. Although this question is about in-depth analysis, it actually only talks about the superficial issues of responsiveness. There are other methods to optimize responsive code, which require continuous research and improvement. If there are any mistakes, please correct me.

The above is an in-depth analysis of responsive layout. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!