In the above example, we use the Media Queries module to use three different styles based on three different sizes of window. Through different media types and conditions are defined stylesheet rules, CSS media queries so that you can more precisely the role of different media types and different conditions for the same media. Most of the media characteristic of the media to accept queries are used to express the min and max "is greater than or equal to" and "with small or equal to." For example, width will min-width and max-width media on a query may be used in the CSS @media and @import rules, it may also be used in the HTML and XML. Through this tag attributes, we can easily achieve a rich interface in different devices, especially on mobile devices, using media queries will be even more extensive. Media Inquiries value that can be obtained as follows:
Ø width and height of the device (device-width, device-heigth), mainly haptic device or a display screen.
Ø render window width and height (width, heigth), mainly haptic device or a display screen.
Get direction Ø handheld device, for example, a horizontal or vertical "orientation (portrait | lanscape)", and the printer device and the like.
Ø acquired aspect ratio (aspect-ratio), comprising a dot matrix printers.
Ø ratio acquisition device (device-aspect-ratio), comprising a dot matrix printers.
Ø Get Object list colors or color (color, color-index), also comprising a display screen.
Ø obtain resolution of the device (resolution).
1 grammatical structure and usage
Media queries used in two ways: one is the embedded "@media" in the CSS styles in the same CSS, to choose different styles of writing different windows; the other is to use an external style sheet references in @ import and use the link in "@media", corresponding to different window sizes selected according to the style file. Use these two methods are the same. Media Queries using the methods are as follows:
@media device type only (selection criteria) Not (selection conditions) and (device characteristics), two devices style code {}
在CSS3的Media Queries模块中支持对外部样式表的引用，使用方法如下所示：
@import url(color.css) screen and (min-width: 1000px); /*使用@import导入CSS文件*/
或：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" /> /*使用link导入外部CSS文件*/
简写：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px) href="link.css" />
上例中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面的最大宽度，第二个条件max-device-width是指设备最大宽度。在样式表中内嵌@media的代码示例如下所示：
@media (min-device-width:1024px) and (max-width:989px)，screen and (max-device- width:480px)，(max-device-width: 480px) and (orientation:landscape)，(min-device- width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }
简写：
@media screen and (max-width:640px) { 样式代码 }
在上面的示例代码中，设置了计算机显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px及横向（即该尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px及垂直放置设备的CSS样式。从上面的例子中可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略）、and（逻辑与）、not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了CSS的基本语法特性。
2 可用的设备类型
在上面的语法中，例如在CSS中嵌入“@media”的方式，开头必须书写“@media”，然后指定设备类型（上例使用screen代表计算机显示器）。CSS中定义了10种设备类型，可以指定的值与该值所代表的设备类型如表3-1所示。
表3-1 在Media Queries模块中可以指定的值与该值所代表的设备类型
3 可用的设备特性参数
通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。例如，通过设备类型指定计算机显示器，再通过设备特性参数指定使用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似，分为两个部分，由冒号分隔，冒号前书写设备的某种特性，冒号后书写该特性的具体值，例如“(min-width:320px)”。CSS中的设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定接受min/max的前缀用来表示大于等于或小于等于的逻辑，以此避免使用“<”和“>”等字符。对于这13种设备特性参数的说明如表3-2所示。
表3-2 13种设备特性的说明
可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。例如以下语句指定了当设备窗口宽度小于640px时所使用的样式：
@media screen and (max-width: 640px) {} style codes
Can use multiple statement to the same pattern and applied to different types of device characteristics in the device, similar to the manner specified below:
@media handheld and (min-width:360px)，screen and (max-width: 480px) { 样式代码 }
Not only can add or keyword in the expression. Keyword Expression not expressed behind the implementation negate operation, the writing method similar to the following:
/ * Style code is used in other devices in addition to a portable device or a color of the portable device * /
@media not handheld and (color) {} style codes
/ * Style code is used in non-color device * /
@media all and (not color) {} style codes
Use only keywords will allow those who do not support Media Queries Media Type of equipment but the browser will be able to read the expression pattern hidden. E.g:
@media only screen and (color) {} style codes
The above statement of support for Media Queries devices, will be able to apply the correct style, as only does not exist. But do not support Media Queries can read the Media Type of equipment (such as IE 8 supports only the "@media screen"), because the first read is not the only screen, ignores this style. Do not support Media Queries browser (such as browser before 8 IE), no matter if there are only, we will ignore this style.