關於css中@media的一些基本使用

最近編寫響應式的時候在使用@media用的不是很順手，因此就記錄一下方便查看

基本語法：

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

 

咱們首先了解一下媒體類型，經常使用的很少，就幾個：screen（電腦屏幕） ，print （打印或者打印預覽），all（全部設備）

（本文側重講述screen，由於本人最近都用這個，嘻嘻）

 

而後這個設備類型的做用是什麼？

答：用來匹配查詢條件的，就是你是要以什麼標準去匹配，是按照屏幕大小改變的條件去匹配仍是按照打印的方式去匹配

 

而後後面的（and+媒體查詢），這個是用來限制查詢條件的，例如當屏幕小於最大寬度時，@media中的class就起做用了

例子：當屏幕寬度小於678px的時候，.box類的背景顏色爲紅色

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

.box {

background-color:red;

}

}

 

固然你的媒體查詢條件也能夠有多個限制

例子：當屏幕寬度在678px到992px之間時，.box類的背景顏色爲紅色

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

.box {

background-color:red;

}

}

 

最後是兩個修飾詞，not，only

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

例子：只對screen類型起做用，對於print等其餘設備不起做用

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

.box {

background-color:red;

}

}

 

not就是對於除了該媒體類型的其餘類型起做用

例子：對於screen類型不起做用，其餘類型起做用

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

.box {

background-color:red;

}

}