最近編寫響應(yīng)式的時候在使用@media用的不是很順手，所以就記錄一下方便查看
基本語法：
@media +（ not | only） + 媒體類型 +（and+ 媒體查詢）
我們首先了解一下媒體類型，常用的不多，就幾個：screen（電腦屏幕） ，print （打印或者打印預(yù)覽），all（所有設(shè)備）
（本文側(cè)重講述screen，因?yàn)楸救俗罱加眠@個，嘻嘻）
然后這個設(shè)備類型的作用是什么？
答：用來匹配查詢條件的，就是你是要以什么標(biāo)準(zhǔn)去匹配，是按照屏幕大小改變的條件去匹配還是按照打印的方式去匹配
然后后面的（and+媒體查詢），這個是用來限制查詢條件的，例如當(dāng)屏幕小于最大寬度時，@media中的class就起作用了
例子：當(dāng)屏幕寬度小于678px的時候，.box類的背景顏色為紅色
@media screen and （max-width:678px）{
.box {
background-color:red;
}
}
當(dāng)然你的媒體查詢條件也可以有多個限制
例子：當(dāng)屏幕寬度在678px到992px之間時，.box類的背景顏色為紅色
@media screen and （min-width:678px） and (max-width:992px){
.box {
background-color:red;
}
}
最后是兩個修飾詞，not，only
先說only，用來匹配媒體類型，表示只對該媒體類型適用
例子：只對screen類型起作用，對于print等其他設(shè)備不起作用
@media only screen and （max-width:678px）{
.box {
background-color:red;
}
}
not就是對于除了該媒體類型的其他類型起作用
例子：對于screen類型不起作用，其他類型起作用
@media not screen and （max-width:678px）{
.box {
background-color:red;
}
}
