在CSS3中添加的媒體查詢，允許內容的呈現針對一個特定範圍的輸出設備而定製，而不必改變內容本身。
Media Queries能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。
媒體類型
all 所有媒體
braille 盲文觸覺設備
embossed 盲文打印機
print 手持設備
projection 打印預覽
screen 彩屏設備
speech ‘聽覺’類似的媒體類型
tty 不適用像素的設備
tv 電視
媒體類型
sans - serif字體比較適合在屏幕上閱讀，而 serif 字體更容易在紙上閱讀。
媒體查詢包含一個可選的媒體類型和零個或多個滿足CSS3規範的表達式.
表達式描述了媒體特徵, 最終會被解析為 true 或 false
如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型, 並且所有的表達式的值都是true, 那麼該媒體查詢的結果為 true
邏輯操作符
可以使用 not ， and 和 only 等邏輯操作符構建複雜的媒體查詢。
and 操作符用來把多個 媒體屬性 組合成一條媒體查詢。只有當每個屬性都為真時，結果才為真。
not 操作符用來對一條媒體查詢的結果進行取反。
only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。
若使用了 not 或 only 操作符，必須明確指定一個媒體類型。默認為 all 所有媒體類型。and 用於合併多個媒體屬性或合併媒體屬性與媒體類型
not 用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備
only 僅在媒體查詢匹配成功的情況下應用指定樣式
語法
常用媒體屬性
設備寬度：device-width | min-device-width | max-device-width
設備高度：device-height | min-device-height | max-device-height
設備寬度比：device-aspect-ratio: 16/9
設備方向：orientation: portrait / landscape
設備輸出分辯率：min-resolution: 300dpi | min-resolution: 2dppx
屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
渲染區域的寬度： width | min-width | max-width
渲染區域的高度： height | min-height | max-height
設備輸出分辯率(打印分辯率)：dpi, dpcm, dppx
指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每釐米（dpcm）的點數來表示。
每英寸包含點的數量（dots per inch）
普通屏幕通常包含96dpi，一般將2倍於此的屏幕稱之為高分屏，即大於等於192dpi的屏幕，比如Mac視網膜屏就達到了192dpi（即2dppx），打印時一般會需要更大的dpi；
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
分辨率PPI與DPI
Media query只接受單個的邏輯表達式作為其值或者沒有值
Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的情況著作權歸作者
橫豎屏的判斷
注意部分 Android 中有bug
當輸入框獲得焦點，觸發彈出鍵盤後，橫屏的樣式出現了，然而他使用的是豎屏，並未把手機橫過來。
添加寬度限制，屏幕寬度大於450px時，並且是橫屏時，應用橫屏樣式
高清圖片適配
在普通屏下使用@1x圖片，在高清屏下使用@2x圖片
屏幕適配
移動端配合 rem 使用，適配不同寬度的屏幕
適配獨立的樣式文件
設備判斷
調整模塊的樣式
