Free HTML5 serialization: HTML5 web page development instance details (6) media queries and html5 instances

Free HTML5 serialization: HTML5 web page development instance details (6) media queries and html5 instances

Another important technical means of responsive design is media query. If you simply design a streaming layout system, you can ensure that each grid is scaled up or down proportionally, but it may make it on a small screen (such as a mobile phone device) the grid is too small to seriously affect reading. Such a design cannot be called a responsive design. Media queries can solve this problem. Media queries can provide specific styles for specific browsers and devices. Media query is a new feature of CSS 3 and an extension of media types.

Tip: W3C lists 10 media types. For more information, see http://www.w3.org/tr/css2/media.html?media-types.

In a responsive design, media queries are generally defined in CSS. For example, you can set the style when the screen width is smaller than PX using the most common method. The Code is as follows:

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

// Set the style smaller than 1024px at this time

}

Set the style when the screen width is less than 600px. The Code is as follows:

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

// Set the style smaller than 600px at this time

}

Set the screen width to 600px ~ The code for the style between 900px is as follows:

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

// Set the style

}

Set the style (for example, iPhone) when the actual resolution of the device is smaller than PX. The Code is as follows:

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

// Set the iPhone style here

}

Set the horizontal style of the iPad or iPhone. The Code is as follows:

@ Media screen and (orientation: landscape ){

// Set the style at this time

}

Tip: