Response layout and response Layout

Response layout and response Layout

For responsive layout, I believe everyone has their own different opinions. Some people think that responsive layout is a kind of web page, but our real responsive layout can be based on the size of the web page, in this way, all the items on the Web page are displayed in a row on the PC side, or they are divided into two sidebar, one sidebar, and the topic content, on the PC end, the overall display is displayed in a row, but as the screen decreases, the layout will become smaller on the mobile phone end, And the buttons in the original vertical layout may be arranged in a horizontal layout .....

There are several methods for compiling a responsive layout:

1. First of all, you should know the word midia. media means media in English. Some people ask what attributes media has? What can it do? In fact, media has a statement @ media screen and (min-width :) (max-width). This statement is the basic application of responsive layout, if it is assigned different values, it can be displayed on different screens, so that she can achieve responsive layout, but due to browser compatibility problems, what should we do if it still has many problems? In this case, some other attributes of media are involved. In a word, media is still very powerful. It can also achieve responsive layout.

2. second, another method of implementing responsive layout is to give the width in the form of percentages, this layout can also achieve the responsive layout effect. The layout will also be zoomed in and out as the screen is zoomed in and out, although this layout method can achieve responsive layout, this layout method is rarely recommended in my work or in the company. Although this layout method is simple, but at the same time, it also has a lot of problems that cannot keep up with the development of the times, and the layout of the Code is relatively more code, the visual is not beautiful, this has a great impact on our project. Although this layout method is simple, few companies now use this layout method.

3. finally, there is another way to do responsive layout, that is, using the bootstrap fence and using col-lg-on the largest screen -, col-sm-applies to flat display, col-xs-applies to the minimum screen, and col-md-is used for display on the PC end. In this frame, A container is divided into twelve grids. This layout method also has a responsive layout. The grid sets different styles for different devices. For example, when two classes are used on an element, the appropriate style is selected based on the screen size of the device, if the screen size is out of the class range, the two classes will be ignored. Each style of the fence is based on the row, different combinations of classes can be used to achieve the expected results displayed on different devices. However, this layout is based on mobile apps. Although it can also achieve responsive layout, however, I personally think that this layout framework is not very good, but there is no small problem in general.

The above is my personal opinion on responsive layout. This is just some of my own opinions. If there is anything wrong with it, please give me more advice. Thank you!