媒體查詢詳解
媒體查詢簡介
♣ 媒體查詢能夠在不同的條件(一般指屏幕或者文檔寬度)下使用不同的樣式，從而達到不同的表現效果。
♣ 媒體查詢包含一個可選的媒體類型，再滿足CSS規範條件下包含零個或者多個表達式，這些表達式描述了媒體特徵，最終會被解析爲true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，並且所有的表達式的值都是true，那麼該媒體查詢的結果爲true.
♣ 樣式表中CSS媒體查詢@media (max-width:1200px){...}
♣ link元素中的CSS媒體查詢<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
♣
基本語法
@media 媒體類型 and (媒體特性) { 樣式 }
媒體類型(現可用)
| 值 | 描述 |
|---|---|
| all | 用於所有設備 |
| 用於打印機和打印預覽 | |
| screen | 用於電腦屏幕、平板電腦、智能手機等 |
| speech | 應用於屏幕閱讀器等發生設備 |
媒體特性
♣ 大多數媒體特性都可以帶有’min-‘、’max-‘前綴，用來表示’最低’、’最高’。例如：’max-width:1200px’,表示應用其所包含樣式最大寬度爲1200px，大於1200px的設備上不會應用此樣式
| 名稱 | 值 | 是否接受min/max前綴 | 備註 | 示例 |
|---|---|---|---|---|
| 顏色索引（color-index） | integer | 是 | 指定了輸出設備中顏色查詢表中的條目數量。 | @media all and (min-color-index:256) { ... } |
| 寬高比（aspect-ratio） | ratio | 是 | 描述了輸出設備目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。 | @media screen and (min-aspect-ratio: 1/1) { ... } |
| 設備寬高比（device-aspect-ratio） | ratio | 是 | 描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。 | @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... } |
| 設備高度（device-height） | length | 是 | 描述了輸出設備的高度（整個屏幕或頁的高度，而不是僅僅像文檔窗口一樣的渲染區域）。 | @media all and (min-device-height:500px){...} |
| 設備寬度（device-width） | length | 是 | 描述了輸出設備的寬度（整個屏幕或頁的高度，而不是僅僅像文檔窗口一樣的渲染區域）。 | <link rel="stylesheet" media="screen and (max-device-width: 799px)" /> |
| 網格（grid） | length | 是 | 判斷輸出設備是網格設備還是位圖設備。如果設備是基於網格的（例如電傳打字機終端或只能顯示一種字形的電話），該值爲1，否則爲0。 | @media handheld and (grid) and (max-width: 15em) { ... } |
| 高度（height）/寬度（width） | length | 是 | height/width 媒體屬性描述了輸出設備渲染區域（如可視區域的高度或打印機紙盒的高度）的高度/寬度。 | @media screen and (min-height:720px){...} |
| 黑白（monochrome） | integer | 是 | 指定了一個黑白（灰度）設備每個像素的比特數。如果不是黑白設備，值爲0。 | @media all and (monochrome) { ... } |
| 方向（orientation） | landscape(橫屏)/portrait(豎屏) | 否指定了設備處於橫屏（寬度大於高度）模式還是豎屏（高度大於寬度）模式。 | @media all and (orientation: portrait) { ... } |
|
| 分辨率（resolution） | resolution | 是 | 指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每釐米（dpcm）的點數來表示。 | @media print and (min-resolution: 300dpi) { ... } |
| 掃描（scan） | progressive/interlace | 否 | 描述了電視輸出設備的掃描過程。 | @media tv and (scan: progressive) { ... } |
♣ 索引顏色：這種顏色下圖像像素用一個字節表示它最多包含有256色的色表儲存並索引其所用的顏色，它圖像質量不高，佔空間較少。
邏輯操作符
and關鍵詞
and關鍵詞能將多多個媒體特性結合在一起。例如：
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}not關鍵詞
not關鍵詞用來對一條媒體查詢的結果取反。
@media not print and (max-width: 1200px){樣式代碼}上述表達式中樣式應用於除打印設備和設備寬度大於600px的所有設備中。
only關鍵詞
only關鍵詞僅在媒體查詢匹配成功的情況下被用於應用一個樣式，這對於防止讓選中的樣式在老式瀏覽器中被應用到。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />上述表達式中only關鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式
♣ PS:若使用了not或only操作符，必須明確指定一個媒體類型。
逗號分隔表
媒體查詢中使用逗號分隔效果等同於or邏輯操作符。當使用逗號分隔的媒體查詢時，如果任何一個媒體查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨立的，一個查詢中的操作符並不影響其它的媒體查詢。這意味着逗號媒體查詢列表能夠作用於不同的媒體屬性、類型和狀態。
例如，如果你想在最小寬度爲700像素或是橫屏的手持設備上應用一組樣式，你可以這樣寫：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }