Media Queries of this function is very strong, he can let you customize different resolution and device, and without changing the content of the case, let you to make a web page under different resolutions and devices can display is normal, and not lost because of this style. first look at a simple example:
code is as follows:


<Link rel="stylesheet" media="screen and (Max - width: 600 px)" href="http://www.jb51.net//css/small.css"/> The media statement said that when the page width less than or equal to 600 px, call small. The CSS stylesheet to render your Web page. First look at the statements contained in the content of media: 1, screen: the needless to say, as you know, is a kind of media types; 2, and that is called keywords, instead of similar and not, only, later will be introduced; 3, (Max - width: 600 px) : this is the media features, said popular point is the media conditions. In order to better understand Media Query, we are back in at the front of the instance: convert the writing CSS for:

  code is as follows:  


@ Media screen and (Max - width: 600 px) {selector {attributes: the attribute value; }} in fact is to small. The styles in the CSS file on the @ media srceen and (Max - width; 600 px) {… } braces. In the statement above statement structure, can be seen that Media query and CSS are similar in the collection of attributes, the main difference in: 1, the Media query only accepts a single logical expression as its value, or value; On page on page 2, CSS properties used to declare the representation of the information; The Media Query is an output device used to determine whether satisfy some condition expression; 3, Media Query most of them accept the min/Max prefix, used to represent the logic relationship, said applied in greater than or equal to or less than or equal to a value of 4, CSS properties requirements must have the attribute values, Media can Query without value, only because of its expression returns true or false two let's take a look at Media Queries, the mode of using the 1, maximum Width of Max Width
code is as follows:


<Link rel="stylesheet" media="screen and (min - width: 900 px)" href="http://www.jb51.net//css/big.css" type="text/CSS"/> The above said is: when the screen is greater than or equal to 900 px, will use big. CSS styles to render a Web page. 2, multiple Media Queries to use
code is as follows:


<Link rel="stylesheet" media="screen and (min - width: 600 px) and (Max - width: 900 px)" href="http://www.jb51.net//css/style.css" type="text/CSS"/> Media Query can combine multiple Media queries, in other words, a Media Query can contain zero or more expression, expression and can contain zero or more keywords, as well as a Media Type. As the above said is when the screen between 600 px, px - 900 USES style.css. CSS styles to render a web page. 3, the output of the Device screen Width Device Width
code is as follows:


<Link rel="stylesheet" media="screen and (Max - device - width: 480 px)" href="http://www.jb51.net//css/iphone.css" type="text/CSS"/> The above code refers to the iphone. The CSS style is suitable for most equipment width is 480 px, such as iphone, according to the Max - device - width refers is the actual resolution of equipment, is refers to the visual area of resolution ratio we can use the media query for android phones in different resolution provides a particular style, so that you can solve different screen resolution for android phone page reconstruction problem. 4, not keyword
code is as follows:


<Link rel="stylesheet" media="not print and (Max - width: 1200 px)" href="http://www.jb51.net//css/print.css" type="text/CSS"/> Not a keyword is used to exclude a set of media types, in other words is used to exclude conforms to the expression of the equipment. 5, only the keyword
code is as follows:


<Link rel="stylesheet" media="only screen and (Max - device - width: 240 px)" href="http://www.jb51.net//css/android240.css" type="text/CSS"/> Only used to set a particular media type, can be used to exclude browser does not support the media queries. Actually only is used to a lot of time for those who do not support Media Query but support Media Type equipment hidden style sheets. The main are: support Media features (Media Queries) equipment, normal invocation style, now only does not exist; For does not support the Media characteristics (Media Queries) and supported Media types (Media Type) of the equipment, it will not read the style, because it is read only, instead of the screen; Browser does not support other Media Qqueries, regardless of whether to support only, the style will not be used. 6, other
code is as follows:


<Link rel="stylesheet" media="(min - width: 701 px) and (Max - width: 900 px)" href="http://www.jb51.net//css/medium.css" type="text/CSS"/> And use commas (,) is used to represent parallel or said, or the following

  code is as follows:  


<Link rel="stylesheet" type="text/CSS" href="http://www.jb51.net//css/style.css" media="handheld and (Max - width: 480 px), screen and (min - width: 960 px)"/> Style in the code above. The CSS styles used in width is less than or equal to 480 px on handheld devices, or be used to screen width is greater than or equal to 960 px device. About Media Query use the introduction to this section, the general rules on its function, personally think that is a word: Media Queries can use different styles in different conditions, using the page to achieve different rendering effects.


This concludes the body part