Understanding of responsive layouts

Today I learned a bit of a responsive layout, some of the important methods and properties I'm here to share with you.

This is part of my case.

You see the above code: it is through the @media media query judgment to execute the CSS style, that is, you write a set of code, can now be adapted to the mobile phone, tablet, PC. Responsive layouts that are implemented through @media media queries.

Another important issue is that on mobile devices, we want to prohibit users from scaling the screen. If not prohibited, it may cause dislocation on the display, and the display is not the style of the mobile website. Therefore, we want to use code to prohibit the user to zoom the screen on the phone side, has reached the normal mobile website effect.

Code broken to: <meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>

Let me say the pros and cons of a responsive layout:

Pros: 1. Flexibility in the face of different resolutions. 2. Can quickly solve multi-device display adaptation problems.

Cons: not fully compatible with all browsers, load time is long.

In fact, responsive layout and adaptive some similar places, such as: are detection equipment, according to different devices using different CSS, and CSS are used as a percentage, rather than fixed width.

The difference: The responsive template looks different on various devices, changes the presentation style as the device changes, and the adaptive does not, all devices look like a set of templates, but the length or the picture is smaller, not according to the device to adopt different display style.

The above is my understanding of the responsive layout, welcome comments, messages,

Understanding of responsive layouts