最近編寫(xiě)響應(yīng)式的時(shí)候在使用@media用的不是很順手，所以就記錄一下方便查看

基本語(yǔ)法：

@media +（ not  | only） + 媒體類(lèi)型 +（and+ 媒體查詢(xún)）

我們首先了解一下媒體類(lèi)型，常用的不多，就幾個(gè)：screen（電腦屏幕） ，print （打印或者打印預(yù)覽），all（所有設(shè)備）

（本文側(cè)重講述screen，因?yàn)楸救俗罱加眠@個(gè)，嘻嘻）

然后這個(gè)設(shè)備類(lèi)型的作用是什么？

答：用來(lái)匹配查詢(xún)條件的，就是你是要以什么標(biāo)準(zhǔn)去匹配，是按照屏幕大小改變的條件去匹配還是按照打印的方式去匹配

然后后面的（and+媒體查詢(xún)），這個(gè)是用來(lái)限制查詢(xún)條件的，例如當(dāng)屏幕小于最大寬度時(shí)，@media中的class就起作用了

例子：當(dāng)屏幕寬度小于678px的時(shí)候，.box類(lèi)的背景顏色為紅色

@media screen and （max-width:678px）{

.box {

background-color:red;

}

}

當(dāng)然你的媒體查詢(xún)條件也可以有多個(gè)限制

例子：當(dāng)屏幕寬度在678px到992px之間時(shí)，.box類(lèi)的背景顏色為紅色

@media screen and （min-width:678px） and (max-width:992px){

.box {

background-color:red;

}

}

最后是兩個(gè)修飾詞，not，only

先說(shuō)only，用來(lái)匹配媒體類(lèi)型，表示只對(duì)該媒體類(lèi)型適用

例子：只對(duì)screen類(lèi)型起作用，對(duì)于print等其他設(shè)備不起作用

@media only screen and （max-width:678px）{

.box {

background-color:red;

}

}

not就是對(duì)于除了該媒體類(lèi)型的其他類(lèi)型起作用

例子：對(duì)于screen類(lèi)型不起作用，其他類(lèi)型起作用

@media not screen and （max-width:678px）{

.box {

background-color:red;

}

}