CSS3 Learning Tutorial: Media Queries

Article Introduction: 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.

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:

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.

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

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

A media Query contains 0 to multiple expressions, with 0 to multiple keywords, and a media feature, such as:

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

Copy Code

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

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

notKeyword is used to exclude devices that match an expression, such as:

2. Media= "not screen and (color)" >

Look at some other examples (inaccurate, just for illustration):

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

3. 
   

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

6. 
   

8. 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 the application of Styleb, and width is less than 600px when the application of Stylec. This is actually a CSS overlay problem, so when the width is exactly equal to 800px should the application of that style? The answer is Styleb, because both of the first two expressions are true, and the latter covers the former.

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

2. Media= "Screen" >
   

3. 
   

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

6. 
   

8. 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 styles. onlyThe keyword may seem redundant, as is true for browsers that support media queries, because adding no to only has no effect. The only role is often used to hide style sheets for devices that do not support media queries but read media type. Like what:

2. Media= "only screen and (color)" >

• 
  

• Support media queries device, apply style correctly, as if only does not exist
  

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

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

Finally, let's look at Media Queries support. Not surprisingly, IE678 all out, but IE9 spared. According to this HTML5 and Same Markup on IEBlog, IE9 supports media Queries. As for other browsers, there is no surprise that all media Queries are supported.

complete support is listed in the following table:



Other methods that define media such as @media, and so on, use media queries in the same way, so they don't repeat the narrative. The level is limited, if has the question please point out to me, thanks: