Free HTML5 serial came the "HTML5 Web development Examples of detailed" series (vi) Media inquiries

Another important technical means of responsive design is media query. If you simply design a streaming layout system, you can make sure that each grid scales up and down proportionally, but it may make the grid too small for small screens (such as a mobile device) and seriously affect reading, which is not designed to be responsive. Media queries can be used to solve this problem. Media queries can provide specific styles for specific browsers and devices. Media queries are a new feature of CSS 3 and an extension of the media type.

Tip: Please refer to http://www.w3.org/TR/CSS2/media.html#media-typesfor the 10 media types listed.

In a responsive design, media queries are typically defined in CSS, such as the most common way to set the style of a screen with a width of less than 1024px, with the following code:

@media screen and (max-width:1024px) {

At this point the style is set at less than 1024px

}

Set the style when the screen width is less than 600px, with the following code:

@media screen and (max-width:600px) {

At this point the style is set at less than 600px

}

To set the style of screen width between 600px~900px, the code is as follows:

@media screen and (max-width:600px) and (min-width:900px) {

Set style

}

To set the device's actual resolution less than 480px when the style (such as the iphone), the code is as follows:

@media screen and (max-device-width:480px) {

iphone phone style is set here

}

To set the ipad or iphone in landscape style, the code is as follows:

@media screen and (Orientation:landscape) {

At this point, set the style

}

Tip: For more information on media inquiries, please refer to http://www.w3.org/TR/css3-mediaqueries/.

Study HTML5 The best book is "HTML5 Web development Example of the detailed", using code learning case study, can be more interesting than reading text!!! A book to fix HTML5, starting from now.