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