语法

@media Media-Type Media-Query (Media-Feature) {    CSS-Code;}

Media-Type媒体类型，常见的有all，screen（屏幕），print（打印机）等；

Media-Query媒体查询添加，包括and，not（排除某种媒体），only（限制某种媒体）；

Media-Feature媒体特征，常用的是min-width，max-width最小最大判断条件；

###1 最常用的引入方式

link方式

@media引入

@media screen {    }

###2 媒体特性使用

Max Width

@media screen  and (max-width: 960px){    //表示当屏幕小于或等于960px的时候，将采用此样式}

Min Width

@media screen and (min-width: 960px) {    //表示当大于或等于960px的时候，讲采用此样式}

多条件

@media screen and (min-width:900px) and (max-width:960px) {    //表示当位于900~960px区间时，采用此样式}

上面所说的是浏览器宽度

设备可视区宽度Device Width

@media screen add (max-device-width: 480px) {    //此样式适用于最大设备宽度为480px}