Responsive layout insights

　　 Regarding responsive layout, I believe everyone has their own different opinions. Some think that responsive layout is a kind of web page, but our real responsive layout is one that can be adjusted according to the size of the web page. On the web page, when on the PC side, everything on the web page is displayed in a row, or it is divided into two side columns, or one side column, and the theme content. On the PC side, it is displayed in one row as a whole. , but as the screen shrinks, the layout will become smaller. On the mobile phone, the buttons that were originally arranged vertically may be arranged horizontally...

　　There are several ways to write responsive layouts:

　　1. First of all, everyone 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 that is @media screen and(min-width:) (max-width); this statement is the basic application of responsive layout. If you give it different values, it can be on different screens. It is displayed, so that she can achieve the effect of responsive layout, but due to browser compatibility issues, it still has many problems. What should I do? At this time, some other attributes of media are involved. In short, media is still very powerful, and it can also be used to achieve responsive layout.

　 2. Secondly, another method of implementing responsive layout is to give the width in the form of percentage. This layout can also achieve the effect of responsive layout. As the screen is enlarged and reduced, the layout will also be enlarged and reduced. This kind of Although the layout method can achieve responsive layout, it is rarely recommended in my work or company. Although this layout method is simple, it also has a lot of problems. The problem has not kept up with the development of the times, and the amount of code in this layout is relatively large and visually unsightly, which has a great impact when we are doing projects, so although this layout method is simple, it is We have very few companies using this kind of layout method now.

　　 3. Finally, there is another way to do responsive layout, that is to use bootstrap's fence. Use col-lg- on the largest screen, col-sm- on a tablet display, and col on the smallest screen. -xs-, if you want to display it on PC, use col-md-. In this framework, a container is divided into twelve grids. This layout method also has the effect of responsive layout. The grid is suitable for different The device sets different styles. For example, if two classes are used on an element, then it will choose the appropriate style according to the size of the device screen. If the screen size is not within the scope of the class, then it will ignore these two classes. Class; each style of the fence is based on row, and different combinations of classes can be used to achieve the desired effect displayed on different devices. However, this layout is mainly for mobile apps, although it is also It can achieve the effect of responsive layout, but I personally think that the framework of this layout is not very good, but overall there are no minor problems.

The above are my personal opinions on responsive layout. These are just some of my own opinions. If there is anything wrong, please give me some pointers. Thank you all!