CSS3 Learning Tutorial: Media queries Detailed

Talking about the new features of CSS3, you have to mention Media Queries.

The introduction of Media Queries, which is to allow the addition of expressions to determine the situation of the media, to apply a different style sheet. In other words, it allows us to enhance the experience by changing the layout of the page to precisely adapt to different devices without changing the content. So media queries and CSS optimizations are not related, even contradictory.

CSS2.1 defines the parts of Media, including types, groups, rules, and so on. CSS is not created for the display, but is applied to a variety of media, such as common displays, more and more handheld devices, possibly slightly outdated televisions and so on.

Referencing the intuitive DEMO in CSS3 Media queries, when the browser width changes, the applied CSS changes. This, however, requires JavaScript control to do so.

The trend of web mobility is increasingly obvious. Although there are many restrictions at home, the tide is unstoppable. The previous time jquery announced that the mobile project also accelerated this change. Media Queries should be used more in the near future to better support emerging devices such as the ipad. In fact, JQuery even has Media queries plugins.

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 only the usual content. How does Media queries work? First look at the link tag:

Code:

　　

In the media properties:

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

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

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

There are 13 media features, which can be said to be a collection of CSS-like properties. Unlike CSS properties, however, media attributes accept only a single logical expression as its value, or there is no value. And most of these accept min/max prefixes, which are used to represent logic greater than or equal to/less than equals, to avoid using < and > these characters.

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

A media Query contains a medium type, and if the media type is not specified, it is the default type all, for example:

Code:

　　

Media= "(max-width:600px)" >

A media Query contains 0 to many expressions, and the expression contains 0 to more keywords, as well as a media feature, such as:

Code:

　　

Media= "Handheld and (Min-width:20em) and (max-width:50em)" >

A comma (,) is used to denote a side-by-side representation or. For example, the following example indicates that this CSS is applied to a handheld with a width of less than 20em, or a screen with a width less than 30em:

Code:

　　

Media= "Handheld and (max-width:20em), screen and (Max-width:30em)" >

The NOT keyword is used to exclude devices that match an expression, such as:

Code:

　　

Media= "not-screen and (color)" >

Look at some other examples (inaccurate, just to illustrate):

Code:

There are 13 media features, which can be said to be a collection of CSS-like properties. Unlike CSS properties, however, media attributes accept only a single logical expression as its value, or there is no value. And most of these accept min/max prefixes, which are used to represent logic greater than or equal to/less than equals, to avoid using < and > these characters.

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

A media Query contains a medium type, and if the media type is not specified, it is the default type all, for example:

Code:

　　

Media= "(max-width:600px)" >

A media Query contains 0 to many expressions, and the expression contains 0 to more keywords, as well as a media feature, such as:

Code:

　　

Media= "Handheld and (Min-width:20em) and (max-width:50em)" >

A comma (,) is used to denote a side-by-side representation or. For example, the following example indicates that this CSS is applied to a handheld with a width of less than 20em, or a screen with a width less than 30em:

Code:

　　

Media= "Handheld and (max-width:20em), screen and (Max-width:30em)" >

The NOT keyword is used to exclude devices that match an expression, such as:

Code:

　　

Media= "not-screen and (color)" >

Look at some other examples (inaccurate, just to illustrate):

Code:

Media= "screen and (min-width:800px)" >

　　

Media= "screen and (min-width:600px) and (max-width:800px)" >

　　

Media= "screen and (max-width:600px)" >

The device is divided into 3 types, the width is greater than 800px, the application of Stylea, width between 600px to 800px when applied Styleb, and width less than 600px when the application Stylec. This is actually a CSS overlay problem, so when the width is exactly equal to 800px when the application that style? The answer is Styleb, because the first two expressions are set up, the latter covering the former.

So the above example can work, but it's not accurate. This example should normally be written like this:

Code:

　　

Media= "Screen" >

　　

Media= "screen and (max-width:800px)" >

　　

Media= "screen and (max-width:600px)" >

Not all browsers support media Queries, so what do these browsers think of media Queries?

Media queries is an extension of CSS3 for media type, so browsers that do not support media queries should still recognize media type, but IE simply ignores the style. The only keyword may seem redundant, which is true for browsers that support media queries, because the add-on only has no effect. Only, many times it is used to hide style sheets for devices that do not support media queries but read media type. Like what:

Code:

　　

Media= "only screens and (color)" >

Support Media queries device, the correct application style, as if only does not exist

Devices that do not support media queries but correctly read media type will ignore this style because they first read only instead of screen.

IE does not support media queries, regardless of whether there is only, ignore the style

Finally look at the support of Media Queries. No accident, IE678 all out, but IE9 spared. According to this HTML5 and same Markup on IEBlog, IE9 supports media Queries. As with other browsers, it is no surprise that all media Queries are supported.

Complete support is listed in the following table:

Other methods of defining media, such as @media, apply media queries in the same way, so they are not repeated. The level is limited, if have the question please indicate to me, thank you:)

Classic Forum Exchange: http://bbs.blueidea.com/thread-2996434-1-1.html

This article link: Http://www.blueidea.com/tech/web/2010/7912.ASP

Media= "screen and (min-width:800px)" >

　　

Media= "screen and (min-width:600px) and (max-width:800px)" >

　　

Media= "screen and (max-width:600px)" >

The device is divided into 3 types, the width is greater than 800px, the application of Stylea, width between 600px to 800px when applied Styleb, and width less than 600px when the application Stylec. This is actually a CSS overlay problem, so when the width is exactly equal to 800px when the application that style? The answer is Styleb, because the first two expressions are set up, the latter covering the former.

So the above example can work, but it's not accurate. This example should normally be written like this:

Code:

　　

Media= "Screen" >

　　

Media= "screen and (max-width:800px)" >

　　

Media= "screen and (max-width:600px)" >

Not all browsers support media Queries, so what do these browsers think of media Queries?

Media queries is an extension of CSS3 for media type, so browsers that do not support media queries should still recognize media type, but IE simply ignores the style. The only keyword may seem redundant, which is true for browsers that support media queries, because the add-on only has no effect. Only, many times it is used to hide style sheets for devices that do not support media queries but read media type. Like what:

Code:

　　

Media= "only screens and (color)" >

Support Media queries device, the correct application style, as if only does not exist

Devices that do not support media queries but correctly read media type will ignore this style because they first read only instead of screen.

IE does not support media queries, regardless of whether there is only, ignore the style

Finally look at the support of Media Queries. No accident, IE678 all out, but IE9 spared. According to this HTML5 and same Markup on IEBlog, IE9 supports media Queries. As with other browsers, it is no surprise that all media Queries are supported.

Complete support is listed in the following table:

Other methods of defining media, such as @media, apply media queries in the same way, so they are not repeated. The level is limited, if have the question please indicate to me, thank you:)

Transferred from: http://edu.cnzz.cn/201308/927879ff.shtml

CSS3 Learning Tutorial: Media queries Detailed