CSS3 Media Queries

In CSS2, media types is adopted to realize the functional characteristics of multimedia queries (medium query). You can use media types to specify a desired media target, so you can specify print,handled and so on, but these media types are supported too little, so you rarely see media types being used except for the print media type.

In CSS3, Media queries has been further developed, it is no longer based on the type of device, but more on the capacity of the device (the capability of the device), and you can use it to check a variety of sub-devices. For example:

• Width and Height (browser window)
• Width and height of the device
• Direction--example is a mobile phone is horizontal (landscape) display, or Straight (portrait) display?
• Resolution (resolution)

The first use of media queries is to add a media queries style to a small screen device directly in the original style file. As shown below:

A very simple and columns layout

If the user's browser supports media queries, then we can write a specific CSS to solve a particular scenario, such as detecting that a user is using a small screen device such as a smartphone, then return a dedicated layout page to these access requests.

Instead of shrinking the original site to accommodate small-screen devices, we reconstructed the content to make the page more user-friendly on a small screen device.

To accommodate small screen devices, we can use the following syntax:

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

}

Then we can add CSS in curly braces for small screens and small widths of devices, by using the waterfall flow to organize the style that we have previously written for the desktop browser style, it is very convenient to rewrite, as long as this part of the style is placed in the end of your CSS file, it will rewrite the previous style rules. So, to linearization our layout with a smaller head image, you can add the following style.

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

div#wrapper{

width:400px;

}

div#header{

Background-image:url (media-queries-phone.jpg);

height:93px;

position:relative;

}

Div#header h1{font-size:140%;}

#content {float:none;width:100%;}

#navigation {Float:none;width:auto;}

}

The above style uses the replaced background picture and decreases the height of the head, then the content (#content) and navigation (#navigation) do not float, overwriting the width defined by the previous style, which only takes effect under the small screen device. Such as:

the second way to use Media queries is to: referencing a standalone detached style file via media queries (linking a separate stylesheet using media queries)

The first media queries usage above is inline, and if you're only making a few changes, it's a good way to add specific inline style code for your device. If your style contains a lot of rewriting, or if you want to completely separate the style of your desktop browser from those used by small-screen devices, referencing a separate style file can make CSS separate.

Add a separate style file behind your main style file, and use the waterfall to rewrite those rules using the following method:

<link rel= "stylesheet" type= "Text/css" media= "only screens and (max-device-width:480px)" href= "Small-device.css"/ >