CSS3 Media Queries Detailed

Source: Internet
Author: User

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 appliesaccepts 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.