@media

构：

@media  all and( min-width:600px){

样式表:即

.mainbox{ background:#fff000;}

}

all可指定的值：

样式表：

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，譬如以下语句指定了当窗口宽度小于640px时所使用的样式：
@media screen and (max-width:639px){样式代码}
可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类型如下所示：
@media handled and (min-width:360px),screen and (min-width:480px){样式代码}
可以在表达式中加上not关键字或only关键字，not关键字表示对后面的表达式执行取反操作，书写方法如下所示：

@media not handled 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的浏览来说，无论是否有only，都将忽略这个样式。
CSS3中的Media Queries模块中也支持对外部样式表的引用，使用方法类似如下表示：
@import url(color.css) screen and (min-width:1000px)