CSS3 Media Queries Detailed

Talking about the new features of CSS3, you have to mention Media Queries. A recent extensive reading list of the Max Design update has been impressively related to Media Queries articles. The IE9, Opacity and Alpha that I just translated the day before yesterday.

Although the title is the same, but this article is not a list of CSS3 Media Queries translation, because the original demo has an example of a picture, the full text is not long and not ugly understand, so I also do not translate. Based on what you have learned to a certain extent, I intend to write it myself.

There are parts of Media that have been defined in CSS2, 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.

And the introduction of media Queries, its role is to allow the addition of expressions to determine the environment of the media, in order to apply a different style sheet. In other words, it allows us to change the layout of the page without changing the content to precisely adapt to different devices.

Referencing the intuitive DEMO in CSS3 Media queries, when the browser width changes, the applied CSS changes. And all of this, the original JavaScript control is required to do so.

The trend of web mobility is increasingly obvious, and the development of various handheld devices is now fully leading the development of the Internet. Although there are many restrictions at home, the tide is unstoppable. The previous time jquery announced the mobile plan, which also accelerated the change. Media Queries should be widely used in the near future to better support emerging devices such as the ipad. In fact, JQuery even has Media queries plugins.

Let's look at what Media Queries has done.

To show my poor PS technology, and to keep my pseudo-tech blog from being too dull, I drew the following picture:

Media queries

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?

Let's look at the link tag's wording:

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

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 or less than equals, to avoid use < and > these characters.

According to the documentation, I will make a list:

to

Media features	Value	applies	accepts Min/max
Width	Length	Visual and tactile media types	Yes
Height	Length	Visual and tactile media types	Yes
Device-width	Length	Visual and tactile media types	Yes
Device-height	Length	Visual and tactile media types	Yes
Orientation	Portrait | Landscape	Bitmap media types	No
Aspect-ratio	Ratio	Bitmap media types	Yes
Device-aspect-ratio	Ratio	Bitmap media types	Yes
Color	Integer	Visual media types	Yes
Color-index	Integer	Visual media types	Yes
Monochrome	Integer	Visual media types	Yes
Resolution	Resolution	Bitmap media types	Yes
Scan	Progressive | Interlace	"TV" Media types	No
Grid	Integer	Visual and tactile media types	No

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:

<link rel="stylesheet" type="text/css" href="example.css"      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:

<link rel="stylesheet" type="text/css" href="example.css"      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:

<link rel="stylesheet" type="text/css" href="example.css"      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:

<link rel="stylesheet" type="text/css" href="example.css"      media="not screen and (color)">

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

 <link rel= "stylesheet"  Type= "text/css" Href= "stylea.css" Media=" screen and (min-width:800px) "><link rel=" stylesheet "type=" text/css "Href=" styleB.css "Media= "screen and (min-width:600px) and (max-width:800px)" ><link rel= "Stylesheet" type= "text/css" href=  "stylec.css" 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, and the latter covers the former.

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

<link rel="stylesheet" type="text/css" href="styleA.css"      media="screen"><link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (max-width: 800px)"><link rel="stylesheet" type="text/css" href="styleC.css" 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:

<link rel="stylesheet" type="text/css" href="example.css"      media="only screen 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:

IE6	Not supported
IE7	Not supported
IE8	Not supported
IE9	Support
Chrome5	Support
Opera10	Support
Firefox3.6	Support
Safari4	Support

Reprint: http://swordair.com/details-on-css3-media-queries/

CSS3 Media Queries Detailed