揭開CSS3媒體查詢迷霧（min-width和max-width）
2016年11月15日 15:11:25 BugMyGod 閱讀數：4206
揭開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示例
查看上面的示例，先把瀏覽器放到最大，再逐漸拉窄；窗口顏色分別從灰色變成紅色、橙色、黃色、綠色。