最近編寫響應式的時候在使用@media用的不是很順手，所以就記錄一下方便查看 基本語法： @media +（ not | only） + 媒體類型 +（and+ 媒體查詢） 我們首先瞭解一下媒體類型，常用的不多，就幾個：screen（電腦屏幕） ，print （列印或者列印預覽），all（所有設備） ...
最近編寫響應式的時候在使用@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;
}
}
