媒體查詢@media scree

揭開CSS3媒體查詢迷霧（min-width和max-width）
http://www.cnblogs.com/lozio/p/4677738.html


本文參考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width
媒體查詢(media queries)是響應式設計(Responsive Web Design簡稱RWD)必不可少的一部分。
媒體查詢有兩個關鍵詞min-width和max-width, 接觸過媒體查詢的同窗可能會認同我， 這兩個關鍵詞很繞；從字面上理解它們可能不那麼容易，以致於我每次都須要在腦海裏面不斷演算，而後當心翼翼地測試效果（大概和寫正則表達式的感受差很少）。

在這篇文章中我嘗試解開媒體查詢的迷霧。首先是名詞解析：

width: 一般指代視口寬度；另外width和device width的區別在於，device width指代是屏幕的物理寬度。好比iphone5的屏幕分辨率是1136x640，豎屏時device width是640，橫屏時是1136。一般，移動設備的瀏覽器都是全屏的，因此通常狀況下width等於device-width。可是height和device-height的狀況不同（瀏覽器上方的地址欄和下方的工具欄有可能不算進視口高度）。鑑於通常媒體查詢不採用height，因此本文全部例子所有使用width，指代width的像素所有加粗便於理解。


規則1： @media only screen and (min-width: 330px) {...}
指「width大於或者等於min-width，採用{...}的樣式」

因此，若是width是320px，這條規則返回false；返回false的媒體查詢規則會直接被瀏覽器過濾掉，不會渲染這條規則中的CSS樣式。這種狀況翻譯過來就是：
「若是320px大於等於330px，採用{...}的樣式」
問題1：有width爲310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則1中{...}的CSS樣式）？

規則2： @media only screen and (max-width: 330px) {...}
指「width小於或者等於max-width，採用{...}的樣式」

若是width是320px，這條規則會返回true，瀏覽器會解析這段規則中的CSS樣式。這種狀況翻譯過來就是：
[若是320px小於或者等於330px，採用{...}的樣式」
問題2：有width爲310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則2中{...}的CSS樣式）？

這條規則會更加容易理解，簡單解釋就是：視口寬度在min-width和max-width之間的，都會採用這條規則。

規則3：@media only screen and (min-width: 330px) and (max-width: 350px) {...}
若是width爲340px, 這條規則返回true。翻譯過來就是：
「若是340px在330px和350px之間，採用{...}的樣式」

問題3：有width爲310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則3中{...}的CSS樣式）？


實例：
body { 
  background-color: gray; 
}


@media screen and ( max-width: 960px ) {
  body { background-color: red; }
}


@media screen and ( max-width: 768px ) {
  body { background-color: orange; }
}


@media screen and ( max-width: 550px ) {
  body { background-color: yellow; }
}


@media screen and ( max-width: 320px ) {
  body { background-color: green; }
}
這條規則翻譯過來就是:


1. 顯示灰色背景；
2. width爲0-960px的，顯示紅色背景；
3. width爲0-768px的，顯示橙色背景；
4. width爲0-550px的，顯示黃色背景；
5. width爲0-320px的，顯示綠色背景；
須要提醒一下的是CSS的優先級概念，在樣式表中越後的樣式優先級越高，就是後面的樣式會覆蓋前面的樣式。在這個例子中，咱們先設定了默認顏色爲灰色。若是width大於960px的，會顯示灰色。


假設width爲750px，會先匹配到灰色，再匹配紅色，最終顯示了橙色。因爲width等於750px，它不在0-550px和0-320px這個範圍，瀏覽器不會解析這些樣式。


codepen示例


查看上面的示例，先把瀏覽器放到最大，再逐漸拉窄；窗口顏色分別從灰色變成紅色、橙色、黃色、綠色。