An in-depth analysis of the principles of responsive layout

Speaking of responsive layout, I believe everyone has a certain understanding. Responsive layout is a very popular design concept this year. With the popularity of mobile Internet, in order to solve the various browser resolutions and different mobile phones nowadays, For the display effect of the device, the designer proposed a responsive layout design plan. Today I will talk to you about the small matter of responsive layout, including what is responsive layout, the advantages and disadvantages of responsive layout, and how to design responsive layout (responsive layout is implemented through CSS3 Media Query). 　 Responsive layout, as the name suggests, changes with the size of the computer screen. Responsive layout means using different terminals to view the page, and the page can be displayed according to different sizes. Responsive layout has advantages and disadvantages. The advantage is: high flexibility when facing devices with different resolutions. It can quickly solve the problem of multi-device display adaptation. Disadvantages: Compatible with various devices, heavy workload, low efficiency, cumbersome code, there will be some hidden useless elements

, long loading time, responsive layout is also a compromising design solution, affected by many factors If it fails to achieve the best results, it will change the original layout structure of the website to a certain extent, which may cause confusion among users. This is responsive layout. First of all, let’s understand what the

media

attribute is @media screen and (min-width: 320px) and (max-width : 479px)

Let’s start with this conditional statement. The

media

attribute is followed by a screen media type (one of the ten media types mentioned above). Then use the and keywords to connect the conditions, and then there is a media query statement in the brackets. Students who know a little bit about css can understand it. This conditional statement means when it is greater than 320less than The style sheet activated under the resolution of 479 .

This statement is the basic application of responsive layout. By assigning different values ​​to it, it can be displayed on screens of different sizes. We have learned above what responsive layout is, so how should we design it in our actual projects??In the past, when we designed websites, we were troubled by the compatibility of different browsers, and now we have to How should we calm down when there are devices of different sizes?There will be solutions when there is demand, haha, When it comes to responsive layout, I have to mention the Media Query in CSS3( Media Query), this is a good thing, easy to use, powerful and fast ...Media Query is a powerful tool for making responsive layouts. Using this tool, we can create all kinds of rich content very conveniently and quickly. A highly practical interface. Next, let’s learn more about Media Query. Define style sheet rules with different media types and conditions. Media queries allow CSS to act more accurately on different media types and different conditions on the same media. Most media properties of media queries accept min and max to express " greater than or equal to " and "less than or equal to. For example: width will have min-width and max-width media queries can be used in @media and @import rules in CSS, can also be used in HTML and XML. Through this tag attribute , we can easily implement rich interfaces on different devices, especially mobile devices, will be more widely used So using responsive media objects is a must. To learn meidia queryquery .

So responsive layout is a very good design concept in

html. Responsive layout brings a lot of convenience to everyone, allowing everyone to view some pages on different devices.