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

基本語法：

@media +（ not  | only） + 媒體類型 +（and+ 媒體查詢）

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

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

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

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

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

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

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

.box {

background-color:red;

}

}

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

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

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

.box {

background-color:red;

}

}

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

先說only，用來匹配媒體類型，表示只對(duì)該媒體類型適用

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

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

.box {

background-color:red;

}

}

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

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

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

.box {

background-color:red;

}

}