本文轉載自：https://www.cnblogs.com/lguow/p/9316598.html（感謝分享）
前面的話

　　一說到響應式設計，肯定離不開媒體查詢media。一般認為媒體查詢是CSS3的新增內容，實際上CSS2已經存在了，CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支援)。本文將詳細介紹媒體查詢的內容

媒介型別

　　在CSS2中，媒體查詢只使用於和標籤中，以media屬性存在

　　media屬性用於為不同的媒介型別規定不同的樣式

screen 計算機螢幕（預設值）
tty 電傳打字機以及使用等寬字元網格的類似媒介
tv 電視型別裝置（低解析度、有限的螢幕翻滾能力）
projection 放映機
handheld 手持裝置（小螢幕、有限的頻寬）
print 列印預覽模式 / 列印頁
braille 盲人用點字法反饋裝置
aural 語音合成器
all 適合所有裝置

　　真正廣泛使用且所有瀏覽器都相容的媒介型別是’screen’和’all’

.box{height: 100px;width: 100px; background-color: lightblue;}

媒體屬性

　　媒體屬性是CSS3新增的內容，多數媒體屬性帶有“min-”和“max-”字首，用於表達“小於等於”和“大於等於”。這避免了使用與HTML和XML衝突的“<”和“>”字元

　　[注意]媒體屬性必須用括號()包起來，否則無效

　　下表中列出了所有的媒體屬性

 width | min-width | max-width
 height | min-height | max-height
 device-width | min-device-width | max-device-width
 device-height | min-device-height | max-device-height
 aspect-ratio | min-aspect-ratio | max-aspect-ratio
 device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
 color | min-color | max-color
 color-index | min-color-index | max-color-index
 monochrome | min-monochrome | max-monochrome
 resolution | min-resolution | max-resolution
 scan | grid
 

【1】顏色（color）

　　指定輸出裝置每個畫素單元的位元值。如果裝置不支援輸出顏色，則該值為0

　　向所有能顯示顏色的裝置應用樣式表

複製程式碼

@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}

複製程式碼
【2】顏色索引（color-index）

　　顏色索引指定了輸出裝置中顏色查詢表中的條目數量，如果沒有使用顏色查詢表，則值等於0

　　向所有使用至少256個索引顏色的裝置應用樣式表(下列程式碼無顯示，說明返回值為0)

複製程式碼

@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}

複製程式碼
【3】寬高比（aspect-ratio）

　　寬高比描述了輸出裝置目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平畫素數（第一個值）與垂直畫素數（第二個值）的比例

　　向可視區域是正方形或者是寬屏的裝置應用樣式表

複製程式碼

@media (min-aspect-ratio: 1/1) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}

複製程式碼
【4】裝置寬高比（device-aspect-ratio）

　　裝置寬高比描述了輸出裝置的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平畫素數（第一個值）與垂直畫素數（第二個值）的比例

　　向寬高比為16:9的特殊寬屏裝置應用樣式表

複製程式碼

@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

複製程式碼
【5】裝置高度（device-height）

　　裝置高度描述了輸出裝置的高度

　　向顯示在最小高度1000px的螢幕上的文件應用樣式表

複製程式碼

@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

複製程式碼
【6】裝置寬度（device-width）

　　裝置寬度描述了輸出裝置的寬度

　　向顯示在最小寬度1000px的螢幕上的文件應用樣式表

複製程式碼

@media (min-device-width: 1000px) {
.box{ height: 100px; width: 100px;background-color: lightblue; }
}

複製程式碼
【7】網格（grid）

　　網格判斷輸出裝置是網格裝置還是點陣圖裝置。如果裝置是基於網格的（例如電傳打字機終端或只能顯示一種字形的電話），該值為1，否則為0　　

　　向非網格裝置應用樣式表

複製程式碼

@media (grid:0) {
.box{height: 100px;width: 100px; background-color: lightgreen;}
}

複製程式碼
【8】高度（height）

　　高度描述了輸出裝置渲染區域（如可視區域的高度或印表機紙盒的高度）的高度

　　向高度大於800px的可視區域的裝置應用樣式表

複製程式碼

@media (min-height:800px) {
.box{ height: 100px; width: 100px;background-color: lightgreen; }
}

複製程式碼
【9】寬度（width）

　　寬度描述了輸出裝置渲染區域的寬度

　　向寬度大於800px的可視區域的裝置應用樣式表

複製程式碼

@media (min-width:800px) {
.box{ height: 100px;width: 100px; background-color: lightgreen;}
}

複製程式碼
【10】黑白（monochrome）

　　黑白指定了一個黑白（灰度）裝置每個畫素的位元數。如果不是黑白裝置，值為0

　　向非黑白裝置應用樣式表

複製程式碼

@media (monochrome:0) {
.box{height: 100px; width: 100px; background-color: lightgreen;}
}

複製程式碼
【11】方向（orientation）

　　方向指定了裝置處於橫屏（寬度大於寬度）模式還是豎屏（高度大於寬度）模式

　　值：landscape(橫屏) | portrait(豎屏)

　　向豎屏裝置應用樣式表

複製程式碼

@media (orientation: portrait) {
.box{height: 100px;width: 100px;background-color: lightgreen; }
}

複製程式碼
【12】解析度（resolution）

　　解析度指定輸出裝置的解析度（畫素密度）。解析度可以用每英寸（dpi）或每釐米（dpcm）的點數來表示

　　[注意]關於螢幕三要素(螢幕尺寸、解析度、畫素密度)的相關內容移步至此

　　向每英寸至少90點的裝置應用樣式

複製程式碼