In-depth resolution responsive layout and deep resolution Layout

In-depth resolution responsive layout and deep resolution Layout

Concept

Responsive layout is the presentation of responsive design solutions. The specific point is that on different devices, the web page can automatically recognize the screen width and display the area of the device (usually the screen width, of course, it can also be other, can be explained in detail below) show different effects. The common point is to design a set of la s that can be used on both PC and mobile terminals.

How to implement responsive layout?

There are three common methods

1, Percentage

You can set the percentage of the width of each box.

Advantage: simple and convenient

Disadvantage: layout is messy when you set margin or padding or use different browsers.

2, MetaTag

The code segment is:

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

This is mainly used to adapt the Code to the mobile screen. viewport refers to the name read when the meta tag needs to be loaded as "viewport ", the width must be equal to the device-width (device width), which is used to tell the browser to set the layout width to the ideal width of the device, initial-scale) this ensures that the device width is obtained during loading and the original size is kept for media query.

3@ MediaMedia Query

The css code segment is:

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

The first screen indicates the screen, which has many parameters, including all (for all devices), print (for printer and print preview) and speech (used in screen reader and other voice equipment ).

Use and to show multiple situations in parallel. min-width and max-width are defined on the screen of that size, which is the soul of the response.

The above example is the media query screen. The minimum width is 10rem and the maximum width is my 20rem device width to implement the style or other functions in braces, here, the rem can be changed to px, em, and other units.

 

Advantages:Currently, most responsive la s are implemented using @ media, which allows you to write a large number of public styles. When you need to adapt to the screen, add corresponding functions in braces to implement responsive layout.

Disadvantages:You may need to write different styles for the same class. The code is complex and difficult.

Which method is used in the application to implement the response type?

No method is perfect. We recommend that you use three methods in turn and use the appropriate method in the right place.

In the layout process, the percentage of the width is usually used in turn with the media query. Before loading the webpage, add the meta tag to define the content of the viewport, this makes it easier for mobile terminals to respond. It also takes into account the compatibility of devices.

 

The general approach to a responsive design scheme is to make three or four la s based on the main types of devices accessed by the target user. Each layout has an interval. For example, the cell phone resolution of a small screen can be set to [320,640]. Then, you can design each layout separately. Generally, each layout mainly adjusts the arrangement and layout order of modules. The smaller the content, the better (to minimize the cost of user adaptation ).

 

Responsive advantages

Compared with the previous elastic box, the responsive layout is better and more active based on user device changes, which is more flexible and readable than the elastic box. A responsive solution solves the adaptive problem of all devices.

 

Responsive disadvantages

R & D is difficult. The corresponding css files may be multiple or individual files.

 

It is not the end of the article. Although this question is about deep parsing, it is actually just about the superficial issue of the response type. There are other methods to optimize the response-type code, we need continuous research and improvement. If there are any mistakes, you are welcome to make an axe.