站長資訊網媒體查詢的語法組成是“@media not|only mediatype and (expressions) {CSS代碼…;}”；媒體查詢可由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回true或false。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設備的類型，CSS3 根據設置自適應顯示。
媒體查詢可用于檢測很多事情，例如：
-
viewport(視窗) 的寬度與高度
-
設備的寬度與高度
-
朝向 (智能手機的橫屏，豎屏)
-
分辨率
目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。
查詢語法
@media not|only mediatype and (expressions) { CSS 代碼...; }
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。
媒體類型
如果指定的多媒體類型匹配設備類型則查詢結果返回 true，文檔會在匹配的設備上顯示指定樣式效果。
除非使用了 not 或 only 操作符，否則所有的樣式會適應在所有設備上顯示效果。
| 值 | 描述 |
|---|---|
| all | 用于所有媒體設備 |
| 用于打印機 | |
| screen | 用于電腦屏幕，平板，智能手機等 |
| speech | 用于屏幕閱讀器 |
媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| width | 定義輸出設備中的頁面可見區域寬度。 |
舉個例子
屏幕寬度大于480px，字體的大小設置為16px。
@media screen and (min-width: 480px) { body { font-size:16px; } }
（學習視頻分享：css視頻教程）
