本文參考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這個范圍，瀏覽器不會解析這些樣式。
查看上面的示例，先把瀏覽器放到最大，再逐漸拉窄；窗口顏色分別從灰色變成紅色、橙色、黃色、綠色。
歡迎分享本文, 但請保留原文鏈接。