Getting Started with responsive layouts

Recently, when researching the framework of responsive design, I found that there are many related property introductions on the Internet, but there are few articles of entry-level use of the system, I have compiled an introductory knowledge by myself, and there is no advanced theory or framework involved.

There are more and more sites and WAP sites using responsive design, because large-screen mobile devices are becoming more and more popular. Self-adapting layouts are no longer competent for a variety of browsing needs. The purpose of the responsive design is to display your data in the best layout possible to implement a user-friendly Web page.

CSS2 period has a not very popular media type, he has such as aural (voice) Braille (Touch) print (print) handheld (mobile device) and so on 10 types of media, (additional media type details http://www.w3.org/ tr/css2/media.html#media-types) using @media rules, you can use different styles for different endpoints in the same style table. The awkward point is that this media type is not really supported by how many terminals.

Now CSS3 has a more practical media query. The mobile terminal's browser basically has fully supported the CSS3. He can get you data for various terminals.

Let me give you an example, let's see this demo. (because the corresponding area is too large, will not, please click to open this connection)

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

A normal adaptive display of the three columns, when you use a different terminal to view this page, he will be based on several terminals to display different styles, on the computer is three columns, on the pad should also be three columns, on the big screen mobile phone is three lines, on the screen less than 320 of the mobile phone only display the main content, hiding the secondary elements. (This demo can also be tested by dragging the browser size.) ）

This is one of the simplest responsive layout pages. Let's learn the media query property from this example.

1. @media screen and (min-width:320px) and (MAX-WIDTH:479PX)

Starting with this conditional statement, the media property is followed by a screen type (one of the 10 media types mentioned above). Then use the AND keyword to join the condition (other keywords also have not, only, see literally everyone can understand, not much to say. ), and then in parentheses is a media query statement, a little bit of CSS can be understood by the students, this conditional statement meaning is more than 320 less than 479 of the resolution of the style sheet activated.

This statement is the basic application of the responsive layout. After judging the terminal resolution size, give different styles into it, just like 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. }

As to how many resolutions to judge, it depends entirely on the needs of your products, the common resolution of mobile phones, tablets (note that these terminals are present in horizontal screen vertical screen differences, this next one), desktop display. Customize the style for the terminal you're facing.

Displays with a general value greater than 960 can be used in the default style without having to be judged in a media query. In one case, the high-pixel ratio of the terminal, such as iphone4 above the retina screen, a small iphone5 screen (iphone screen is really small AH), his resolution has reached the 1136*640, how to make the magnified twice times the screen display is still clear?

In the face of this fine resolution of the terminal, we have another conditional query statement device-pixel-ratio.

Like in the example.

1. @media only screens and (-moz-min-device-pixel-ratio:2), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1), only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixel-ratio:2)

is to determine the pixel ratio of the terminal is 2 words, the style rendered. Iphone4 above pixel ratio is 2, high resolution andriod device pixel ratio is 1.5, the example is only a pixel ratio of 2 query, 1.5 or other proportional method, the front with a few browser private properties, the last is a common property,

1. @media only screens and (-moz-min-device-pixel-ratio:2), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1), only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixel-ratio:2)

Equals

1. @media only screen and (Min-device-pixel-ratio:2)

For some versions of compatibility, have to write long.

1. body{
2. font-size:24px;
3. }
4. . box2{
5. Background:url (d/20.png) #ccc;
6. background-size:50%;
7. }

The purpose of this writing in the 2-pixel terminal is to make his display easier to identify, generally to display a 1px background image, and we want to prepare a 2px, and then background-size:50% this. 1.5 pixels compared to the same example.

For example, the above demo, if you use iphone4 above the Apple phone to see, the middle of the background image should be displayed "2.0 pixel ratio."

Here also exposes the response of a big drawback: need to do a number of background map (as the content of the picture temporarily ignored, elastic images and elastic fonts, next time to write an introduction to the blog).

For media query compatibility, I don't think it's important because there are very few browsers with IE9 below. Basic is the advanced browser. If special need, can download a compatible JS file

1. <!--[If Lt IE 9]>
2. <scriptsrc= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
3. <! [endif]-->

Added to the file in the form of conditional annotations.

An introduction to the responsive layout of the notes of practicing Xiao Xi's front end

Ddamy.com, Duke of arrogance.

Getting Started with responsive layouts