Free HTML5 serial came the "HTML5 Web development Case Specific explanation" serial (vi) Media inquiries

There is also an important technical means for responsive design is media query. Assuming that the simple design of a streaming layout system ensures that each grid is scaled up and down proportionally, it is possible that a small screen (such as a mobile device) grid is too small to affect reading, which is not designed to be responsive. Media queries are able 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.

Hint: The list of 10 media types, please refer to http://www.w3.org/TR/CSS2/media.html#media-types.

In a responsive design, media queries are typically defined in CSS, such as the most common way to set a style with a screen width of less than 1024px, such as 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, such as 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 the screen width between 600px~900px, the code is as follows:

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

Set style

}

Set the device's actual resolution to less than 480px when the style (such as the iphone), code such as the following:

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

iphone phone style is set here

}

Set the style for ipad or iphone in landscape, code such as the following:

@media screen and (Orientation:landscape) {

At this point, set the style

}

Tip: A lot of other media inquiries please refer to http://www.w3.org/TR/css3-mediaqueries/.

Learning HTML5 The best book is "HTML5 Web page Development Example specific explanation", using code learning case study, can be more interesting than reading text!!! A book to fix the HTML5, from now on start.

Free HTML5 serial came the "HTML5 Web development Case Specific explanation" serial (vi) Media inquiries