Media Query 的使用方法通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。
如：width会有min-width 和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
媒体查询能够获取的值如下：•设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
•渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
•设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
•画面比例aspect-ratio点阵打印机等。
•设备比例device-aspect-ratio-点阵打印机等。
•对象颜色或颜色列表color，color-index显示屏幕。
•设备的分辨率resolution。
语法结构及用法媒体查询有两种使用方式，一种是在CSS样式中内嵌“@media”，在同一个CSS中通过不同窗口编写不同的样式去选择。
另一种是使用外部样式表的引用，在@import和link中使用“@media”，根据不同的窗口大小选择对应的样式文件。
这两种方式的使用方法是一样的。
Media Queries的使用方法如下所示：@media 设备类型 only (选取条件) not (选取条件) and (设备特性)，设备二 { 样式代码 }在CSS3中的Media Queries模块中支持对外部样式表的引用，使用方法类型如下代码：@import url(color.css) screen and (min-width: 1000px);或：<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以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，样式代码为兼容设置的样式表，包含在中括号里面。
only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。
可用的设备类型在CSS中嵌入“@media”的方式，开头必须书写“@media”,然后指定设备类型（上例使用screen代表电脑显示器）。
CSS中定义了10种设备类型可以指定的值设置类型all所有设备braille盲文，即盲人用点字法触觉回馈设备embossed盲文打印机handheld手持的便携设备print文档打印用纸或打印预览视图模式projection各种投影设备screen彩色电脑显示器屏幕speech语言和音频合成器tty固定字母间距的网格的媒体，比如电传打字机和终端tv电视机类型的设备可用的设备特性参数通过设备类型可以区分使用的设备，再通过设备特性参数来设置同一设备的不同型号。
例如，通过设备类型指定电脑显示器，再通过设备特性参数指用多大屏幕的显示器。
设备特性的书写方式与样式的书写方式很相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。
例如“(min-width:320px)”。
CSS中的设置特性共有13种，是一个类似于CSS属性的集合。
但与CSS属性不同的是，大部分设备特性的指定接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用“<”和“>”这些字符。
对于这13种设备特性参数的说明如表特性可指定值可用媒体类型是否接受min/max前缀特性说明width带单位的长度值例如：640px 视觉屏幕/触摸设备允许定义输出设备中的页面可见区域宽度(单位一般为px)，即浏览器窗口的宽度heigth带单位的长度值例如：320px 视觉屏幕/触摸设备允许定义输出设备中的页面可见区域高度(单位一般为px)，即浏览器窗口的高度device-width带单位的长度值例如：640px 视觉屏幕/触摸设备允许定义输出设备的屏幕可见宽度(单位一般为px)，即设备屏幕分辨率的宽度值device-heigth带单位的长度值例如：320px 视觉屏幕/触摸设备允许定义输出设备的屏幕可见高度(单位一般为px) ，即设备屏幕分辨率的高度值orientation只能指定两个值：portrait 或 landscape位图介质类型不允许浏览器窗口的方向是纵向还是横向，当窗口商度大于等于宽度值是该特性值为portait（横向），否则为landscape（竖向）aspect-ratio比例值例如16/9位图介质类型允许定义’width’与’height’的比率，即浏览器的长宽比device-aspect-ratio比例值例如16/9位图介质类型允许定义’device-width’与’device-height’的比率，即设备屏幕长宽比。
如常见的显示器比率：4/3， 16/9，16/10color整数值视觉媒体允许设备使用多少位的颜色值，如果不是彩色设备，则值等于0color-index整数值视觉媒体允许色彩表中的色彩数monochrome整数值视觉媒体允许定义在一个单色框架缓冲区中每像素包含的单色原件个数。
如果不是单色设备，则值等于0resolution分辨率值例如300dpi位图介质类型允许定义设备的分辨率。
如：96dpi，300dpi，118dpcmscan只能指定两个值：progressive 或interlace电视类不允许定义电视类设备的扫描方式， progressive逐行扫描，interlace隔行扫描grid只能指定两个值：0 或1栅格设备不允许用来查询输出设备是否使用栅格或基于位图。
1代表是，0代表否可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如以下语句指定了当设备窗口宽度小于640px时所使用的样式：@media screen and (max-width: 640px) { 样式代码 }可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类似如下所示：@media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }可以在表达式中加上not关键字或only关键字， not关键字表示对后面的表达式执行取反操作，书写方法类似如下所示：/* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */@media not handheld and (color) { 样式代码 }/* 样式代码将被使用在非彩色设备中 */@media all and (not color) { 样式代码 }使用only关键字的作用是让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。
例如：@media only screen and (color) { 样式代码 }上面的语句对于支持Media Queries的设备来说，将能够正确应用样式，就像only不存在一样。
对于不支持Media Queries但能够读取Media Type的设备（例如IE8只支持“@media screen”）来说，由于先读到的是only而不是screen, 将忽略这个样式。
对于不支持Media Queries 的浏览器（例如IE8之前的浏览器）来说，无论是否有only, 都将忽略这个样式。