CSS3 Media Queries Detailed

Speaking of the new features of CSS3, we have to mention Media Queries.

This article is more detailed, so many of the actual use is not. So if you simply want to learn about media Queries, refer to CSS3 media Queries.

CSS2.1 defines the Media section, including types, groups, and rules. CSS is not created for display, but is applied to a variety of media, such as the common display, the more and more handheld devices, may be slightly outdated TV sets and so on.

The introduction of Media Queries is designed to allow the addition of an expression to determine the media situation in order to apply a different style sheet. In other words, it allows us to enhance the experience by changing the layout of the page to fit the different devices without changing the content. So media queries and CSS optimization are not related, even contradictory.

Referencing the intuitive DEMO in CSS3 Media queries, the applied CSS changes when the browser width changes. And these, originally need JavaScript control to do.

The trend towards web mobility is increasingly evident. Although the country is subject to a lot of restrictions, but this wave can not be stopped. A few days ago, jquery announced the mobile project, which also accelerated the change. Media Queries should be used more in the near future to better support emerging devices like the ipad. In fact, JQuery even has Media queries Plug-ins.

See what Media Queries did.

A three-column layout that, when the screen narrows, becomes a 1-column layout, or even a 2nd column that eliminates the extra two columns and leaves the usual content. How does Media queries work? First look at the link tag:

Code:

<link rel= "stylesheet" type= "Text/css" href= "swordair.css" media= "screen and (min-width:400px)" >

In Media properties:

Screen is one of the media types, and CSS2.1 defines 10 types of media

and is called a keyword, and other keywords include not (excluding some device), only (qualifying some device)

(min-width:400px) is the media feature, which is placed in a pair of parentheses. Complete features refer to the relevant Media features section

A total of 13 media features, can be said to be a similar set of CSS properties. Unlike CSS properties, however, the media attribute accepts only a single logical expression as its value, or no value. And most of them accept the Min/max prefix, which is used to represent logic greater than or equal to or less than equal, to avoid using < and > these characters.

So, back to that media query,media= "screen and min-width:400px" means this CSS is applied when the width is greater than 400px.