基本语法：
@media +（and | not | only） + 媒体类型 +（and+ 媒体查询）
1.媒体类型
常用的不多，就几个：screen（电脑屏幕） ，print （打印或者打印预览），all（所有设备）,作用就是用来匹配查询条件的，就是你是要以什么标准去匹配，是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配
2.媒体查询
（and+媒体查询），这个是用来限制查询条件的，例如当屏幕小于最大宽度时，@media中的class就起作用了
例子：当屏幕宽度小于678px的时候，.box类的背景颜色为红色
@media screen and （max-width:678px）{
.box {
}
}
当然你的媒体查询条件也可以有多个限制
例子：当屏幕宽度在678px到992px之间时，.box类的背景颜色为红色
@media screen and （min-width:678px） and (max-width:992px){
.box {
}
}
3.关键字（修饰词）
最后是关键字（修饰词）：and，not，only
先说only，用来匹配媒体类型，表示只对该媒体类型适用，用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
例子：只对screen类型起作用，对于print等其他设备不起作用
@media only screen and （max-width:678px）{
.box {
}
}
not就是对于除了该媒体类型的其他类型起作用，该关键字是用来排除某种制定的媒体类型
例子：对于screen类型不起作用，其他类型起作用
@media not screen and （max-width:678px）{
.box {
}
}