media query和media type總結
media type -- 媒體類型
media type是 css2 中的一個非常有用的屬性，通過 media type 我們可以對不同的設備指定特定的樣式，從而實現更豐富的界面。下面要說到 css3 中的 media query 是對 media type 的一種增強。
media type的種類：
-
all-- 適用于所有設備
-
print-- 用于打印機
-
screen-- 適用于彩色電腦顯示器（也包括手機、iPad等手持設備）
-
speech-- 用于語音類型
注意： CSS2.1 和 CSS3 media query 定義了 tty , tv , projection , handheld , braille , embossed , aural 這些 media type ，但是它們在 media query 4 中都廢棄了，所以不推薦使用了
media type的使用方法：
第一種： <link> 標簽的 media 屬性
<link href="style.css" media="screen print" ...
第二種： <style> 標簽的 media 屬性
<style media="all" type="text/css">
p{
color: #ff0000
}
</style>
第三種： @import 方式
<style>
@import url("xxx.css") "screen,print";
</style>
第四種：在 style 里為某些樣式指定 media
@media speech {
p{
color: #ff0000
}
}
注：若沒有指定media，默認為 all
media query -- 媒體查詢
媒體查詢是通過不同的媒體類型和條件定義不同的樣式表，媒體查詢讓 CSS 可以更精確作用于不同的媒體類型和同一媒體的不同條件。也是 media type 的增強。
語法
媒體查詢包含一個 媒體類型(media type) 以及一個到多個測試 媒體特性(media feature) 的表達式，表達式和媒體類型將根據實際情況計算得到 true 或者 false 。如果指定的媒體類型符合當前設備并且媒體特性表達式都為真，那當前媒體查詢為。
@media screen and (min-width: 700px) and (orientation: landscape) {}
/*其中screen就是媒體類型，min-width: 700px是媒體特性表達式*/
邏輯運算符
-
and 運算符 -- 用于結合多個媒體特性( media feature )到一個 media query
@media screen and (min-width: 700px) and (orientation: landscape) { .name { color:red; } }當設備類型為 screen ，且 viewport 的寬度大于 700px ，并且設備可見區域寬度大于高度（橫屏），三個條件都滿足時，大括號內的樣式才會生效。
-
逗號（ , ）運算符 -- 用于結合多個 media query
@media (min-width: 700px), screen and (orientation: landscape) { .name { color:red; } }上面代表兩種不同設備，一種 all ，一種 screen ，用逗號分隔。
-
not 運算符 -- 用于對整個 media query 取反，必須位于一個 media query 的開頭
@media not all and (monochrome) {}等價于：
@media not (all and (monochrome)) {}注意： not 是對整個 media query 進行否定，不能對單個 media feature 否定
-
only 運算符 --用來定某種特別的媒體類型
對于支持 Media Query 的設備來說，如果存在 only 關鍵字，Web瀏覽器會忽略 only 關鍵字，并直接根據后面的表達式應用樣式文件。對于不支持 Media Query 的設備，但能夠讀取 Media Type 類型的Web瀏覽器，遇到 only 關鍵字時會忽略這個樣式文件。
@media only screen and (min-width: 400px) and (max-width: 600px) {}不支持 media query 但是支持 media type 的web瀏覽器，會省略后面的樣式文件，上面的實例解釋為：
@media only {}支持 media query 的web瀏覽器會省略 only 關鍵字，上面實例解釋為：
@media screen and (min-width: 400px) and (max-width: 600px) {}
media feature -- 媒體特性
下面是一些媒體特性，不是全部
-
width-- 定義輸出設備中的 頁面可見區域 寬度
-
height-- 定義輸出設備中的 頁面可見區域 高度
-
device-width-- 定義輸出設備的 屏幕可見 寬度
-
device-height-- 定義輸出設備的 屏幕可見 高度
-
orientation-- 定義'height'是否大于或等于'width'。 portrait 代表是（豎屏）， landscape 代表否（橫屏）
-
aspect-ratio-- 定義 width 與 height 的比率，可以設置 min/max
-
device-aspect-ratio-- 定義 device-width 與 device-height 的比率。可以設置 min/max 。如常見的顯示器比率：4/3, 16/9, 16/10
-
resolution-- 定義設備的分辨率。可以設置 min/max 。如：96dpi, 300dpi, 118dpcm
-
color-- 定義每一組輸出設備的彩色原件個數。如果不是彩色設備，則值等于0。可以設置 min/max
media query 常用方法
-
排他 （exclusive）為確保在某一個條件下只有一個樣式表生效，將查詢條件嚴格劃分，如下面：
@media (max-width: 400px) { html { background: red; } }@media (min-width: 401px) and (max-width: 800px) { html { background: green; } }
@media (min-width: 801px) { html { background: blue; } }</code></pre> </li>
覆蓋（overriding）可以對元素設置相同優先級，使用樣式順序，通過覆蓋，避免排他
@media (min-width: 400px) { html { background: red; } }@media (min-width: 600px) { html { background: green; } }
@media (min-width: 800px) { html { background: blue; } }</code></pre> </li>
無線端優先（Mobile first）默認樣式假設為移動設備寬度，然后通過 min-width 控制擴展樣式
html { background: red; }@media (min-width: 600px) { html { background: green; } }</code></pre> </li>
PC優先（desktop first）默認以寬屏進行樣式設置，通過 max-width 控制樣式覆蓋
html { background: red; }@media (max-width: 600px) { html { background: green; } }</code></pre> </li> </ul>
參考資料：
來自：https://segmentfault.com/a/1190000008701062