CSS3中的多媒体查询@media

在CSS3中多媒体查询@media又是响应式布局

响应式布局

　　优点：一个页面适用多个设备 手机，ipad，pc端

　　缺点：会导致代码冗余

设备分类：

　　1.all 所有设备

　　2.print 打印机

　　3.screen 电脑，智能手机，ipad 常用

　　4.speech 屏幕阅读器等发声设备

多媒体查询筛选条件：

　　1.not 否定条件

　　　　条件写到设备类型前面

　　　　@media not screen and(min-width:960px) and (max-width:1200px){}

　　2.only 仅仅

　　　　条件写到设备前面

　　　　@media only screen (min-width:960px) and (max-width:1200px){}

　　3.查询公式

　　　　@media only screen (min-width:960px) and (max-width:1200px){}