Analysis on media queries of CSS3

This article mainly introduces about CSS3 Media Queries (responsive layout allows you to customize the different resolutions and devices), has a certain reference value, now share to everyone, the need for friends can refer to

Media queries is a powerful feature that allows you to customize different resolutions and devices, and allows you to make Web pages appear normal under different resolutions and devices without changing the content, without losing the style

Media queries is a powerful feature that allows you to customize different resolutions and devices and, without changing the content, allows your Web pages to appear normal under different resolutions and devices, without losing the style.
Let 's start with a simple example:

<link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Small.css"/>

The media statement above represents: When the page width is less than or equal to 600px, call the SMALL.CSS style sheet to render your Web page. First look at what the media statement contains:
1, screen: This needless to say that we all know, refers to a type of media;
2, and: is called keywords, and similar to the not,only, will be introduced later;
3, (max-width:600px): This is the media characteristics, the popular point is that the media conditions.
To get a better understanding of media Query, we go back to the previous instance: the translation into CSS is:

@media screen and (max-width:600px) {selector {property: property value;}}

In fact, the style in the Small.css file is placed in the @media Srceen and (max-width;600px) {...} Curly braces. In the statement structure above the statement, you can see that the media query and CSS Properties collection are similar, the main differences are:
1, Media query accepts only a single logical expression as its value, or no value;
2. CSS properties are used to declare how the page information is represented, and media query is an expression that determines whether the output device satisfies a certain condition;
3. Media query Most of these accept the Min/max prefix, which is used to represent their logical relationship, and to indicate a condition that is greater than or equal to or less than or equal to a value
4, CSS properties require that property values must be, Media query can have no value, because its expression returns only true or False two

Let's take a look at the specific use of media queries
one, max width max

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

The above indicates that when the screen is greater than or equal to 900px, the Web page is rendered in the Big.css style.
two, multiple media queries use

<link rel= "stylesheet" media= "screen and (min-width:600px) and (max-width:900px)" href= "Style.css" type= "text/css"/ >

Media query can combine multiple media queries, in other words, a media query can contain between 0 and more expressions, and the expression can contain between 0 and more keywords, as well as a media Type. As it says above, when the screen is between 600px-900px, the STYLE.CSS style is used to render the Web page.
three, the output width of the device screen devices width

<link rel= "stylesheet" media= "screen and (max-device-width:480px)" href= "Iphone.css" type= "Text/css"/>

The above code refers to the IPHONE.CSS style for the maximum device width of 480px, such as the display on the iphone, where Max-device-width refers to the actual resolution of the device, that is, the visual area resolution
We can use media query to provide specific styles for Android phones at different resolutions, so that the screen resolution can be resolved differently for Android phone page refactoring issues.
Four, not keyword

<link rel= "stylesheet" media= "not print and (max-width:1200px)" href= "Print.css" type= "Text/css"/>

The NOT keyword is used to exclude a certain type of media, in other words, to exclude devices that match an expression.
Five, only keyword

<link rel= "stylesheet" media= "only screens and (max-device-width:240px)" href= "Android240.css" type= "Text/css"/>

Only used to set a specific media type that can be used to exclude browsers that do not support media queries. In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. The main features are: devices that support media Queries, the normal invocation style, when only does not exist, and for devices that do not support media features (media Queries) but that support the medium type, which will not read the style, Because its first reads only instead of screen, and the browser does not support media qqueries, the style will not be adopted, whether or not it supports only.
Vi. Other
If media Type is not explicitly specified in media query, it defaults to all, such as:

<link rel= "stylesheet" media= "(min-width:701px) and (max-width:900px)" href= "Medium.css" type= "Text/css"/>

There is also a comma (,) that is used to denote a juxtaposition or representation or, as follows

<link rel= "stylesheet" type= "Text/css" href= "Style.css" media= "handheld and (max-width:480px), screen and (min-width : 960px) "/>

The style.css style in the code above is used on a handheld device with a width less than or equal to 480px, or on a device with a screen width greater than or equal to 960px.
The section on the use of Media query is described here, and in the end the overall regulation of its function, the personal think is a word: Media queries can use different styles under different conditions, use the page to achieve different rendering effect.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!