Responsive layout principle

It turns out that responsive layout is mysterious and needs to be implemented using Js.

I accidentally found an article today. Everything is so easy ~ A media query is used to determine the screen size, and the corresponding style is used according to the screen size.

At present, more and more websites and WAP sites are using responsive design, because mobile devices with large screens are becoming increasingly popular. However, the Adaptive Layout cannot meet various Browser needs. The purpose of a responsive design is to display your data in the best possible layout for user-friendly web pages.

Css2 has a media type that is not commonly used. It has ten media types, such as aural (sound) Braille (touch) print (print) handheld (mobile device, (Additional media type detail http://www.w3.org/TR/CSS2/media.html#media-types) with @ media rules you can use different styles for different terminals in the same style sheet. This media is embarrassing.
Type is not really supported by many terminals.

Css3 now has a more practical media query. Mobile Terminal browsers support css3. you can obtain data from various terminals.

Let's take a look at this demo. (Because the corresponding area is too large, you will not be able to open this connection)

Http://www.caihong.cc/demo/media/

A common self-adaptive three-bar webpage. When you use different terminals to view this page, it will display different styles based on several terminals, there are three columns on the computer, three columns on the pad, and three rows on the big screen mobile phone. Only the main content is displayed on the mobile phone with a screen smaller than 320, and the secondary elements are hidden. (There is also a good message about responsive layout, that is, dragging a browser can trigger judgment conditions. You do not need to find a bunch of mobile phones during the test, you only need to narrow down your browser window to a certain size. This demo can also be tested by dragging the browser size .)

This is the simplest responsive layout page. Let's get to know the attributes of media query in this example.

1. @ Media screen and (min-width: 320px) and (max-width: 479px)

As described in this condition statement, the media attribute is followed by a screen media type (one of the ten media types mentioned above ). Then use the and keyword to connect to the condition (other keywords include not, only, which can be understood literally .), Then there is a media query statement in the brackets, which can be understood by those who have a little understanding of CSS. This condition statement indicates the style sheet activated at a resolution greater than 320 and less than 479.

This statement is the basic application of the responsive layout. After determining the terminal resolution size, assign different styles to them, just as in our example

1. @ Media screen and (max-width: 320px ){
2. Body {...}
3. }
4. @ Media screen and (min-width: 800px) and (max-width: 1024px ){
5. Body {...}
6. }

The number of resolutions to be determined depends on your product requirements. Common resolutions include mobile phones and tablets (note that these terminals have differences between landscape screens and vertical screens, which will be mentioned in the next article ), desktop display. Customize the style of the terminal you are facing.

Generally, displays larger than 960 can use the default style instead of media queries. Except for a terminal with a high pixel ratio, such as a Retina screen above iPhone 4, a small screen of iPhone 5 (the screen of iPhone is really small ), his resolution has reached 1136*640. How can I make the screen display that has been zoomed twice clearer?

In the face of this terminal with fine resolution, we have another conditional query statement.Device-pixel-Ratio.

For example

1. @ Media only screen and (-moz-Min-device-pixel-ratio: 2), only screen and (-o-Min-device-pixel-ratio: 2/1 ), only screen and (-WebKit-Min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

That is, if the pixel ratio of the terminal is 2, The rendered style. The pixel ratio of iPhone 4 and above is 2, and the pixel ratio of high-resolution andriod devices is 1.5. In this example, only the query of the pixel ratio is 2. The method of 1.5 or other proportions is the same, the private attributes of several browsers are used before, and the last one is general attributes,

1. @ Media only screen and (-moz-Min-device-pixel-ratio: 2), only screen and (-o-Min-device-pixel-ratio: 2/1 ), only screen and (-WebKit-Min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

Equal

1. @ Media only screen and (min-device-pixel-ratio: 2)

For the sake of compatibility with some versions, it is hard to write long.

1. Body {
2. Font-size: 24px;
3. }
4. . Box2 {
5. Background: URL (D/javaspng) # CCC;
6. Background-size: 50%;
7. }

In a pixel-2 terminal, the goal is to make it easier to identify the display. Generally, to display a 1px background image, we need to prepare a 2px image, then, the background-size: 50% is used. 1.5 pixel ratio.

For example, in the demo above, if you use an iPhone 4 or above, the background image in the middle should show "2.0 pixel ratio ".

A major drawback of the response style is also exposed: more background images are needed (for the moment, images displayed as content are ignored, and elastic images and fonts are also needed, next time, I will write an introduction blog ).

I don't think it is very important for media query compatibility, because few terminals have browsers with ie9 or lower. Almost all are advanced browsers. You can download a compatible JS file for special purposes.

1. <! -- [If lt ie 9]>
2. <Scriptsrc = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </SCRIPT>
3. <! [Endif] -->

Add it to the file as a condition annotation.