媒體查詢可用于檢測(cè)很多事情，例如：
- viewport(視窗) 的寬度與高度
- 設(shè)備的寬度與高度
- 朝向 (智能手機(jī)橫屏虾啦，豎屏) 。
- 分辨率
媒體類型
| 媒體類型 | 描述 |
|---|---|
| all | 用于所有設(shè)備 |
| aural | 已廢棄千劈。用于語音和聲音合成器 |
| braille | 已廢棄梯码。 應(yīng)用于盲文觸摸式反饋設(shè)備 |
| embossed | 已廢棄。 用于打印的盲人印刷設(shè)備 |
| handheld | 已廢棄厨疙。 用于掌上設(shè)備或更小的裝置洲守，如PDA和小型電話 |
| 用于打印機(jī)和打印預(yù)覽 | |
| projection | 已廢棄。 用于投影設(shè)備 |
| screen | 用于電腦屏幕沾凄，平板電腦梗醇，智能手機(jī)等。 |
| speech | 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備 |
| tty | 已廢棄撒蟀。 用于固定的字符網(wǎng)格叙谨，如電報(bào)、終端設(shè)備和對(duì)字符有限制的便攜設(shè)備 |
| tv | 已廢棄保屯。 用于電視和網(wǎng)絡(luò)電視 |
多媒體查詢語法
@media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式手负。
多媒體查詢由多種媒體組成，可以包含一個(gè)或多個(gè)表達(dá)式姑尺，表達(dá)式根據(jù)條件是否成立返回 true 或 false竟终。
@media not|only mediatype and (expressions) {
CSS 代碼...;
}
- not: not是用來排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）股缸。
- only: 用來定某種特別的媒體類型衡楞。對(duì)于支持Media Queries的移動(dòng)設(shè)備來說，如果存在only關(guān)鍵字敦姻，移動(dòng)設(shè)備的Web瀏覽器會(huì)忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件瘾境。對(duì)于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件镰惦。
- all: 所有設(shè)備迷守，這個(gè)應(yīng)該經(jīng)常看到旺入。
也可以在不同的媒體上使用不同的樣式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="mystyle.css">
媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的比率 |
| color | 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)兑凿。如果不是彩色設(shè)備，則值等于0 |
| color-index | 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)茵瘾。如果沒有使用彩色查詢表礼华，則值等于0 |
| device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設(shè)備的屏幕可見高度拗秘。 |
| device-width | 定義輸出設(shè)備的屏幕可見寬度圣絮。 |
| grid | 用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。 |
| height | 定義輸出設(shè)備中的頁面可見區(qū)域高度雕旨。 |
| max-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率扮匠。 |
| max-color | 定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)捧请。 |
| max-color-index | 定義在輸出設(shè)備的彩色查詢表中的最大條目數(shù)。 |
| max-device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率棒搜。 |
| max-device-height | 定義輸出設(shè)備的屏幕可見的最大高度疹蛉。 |
| max-device-width | 定義輸出設(shè)備的屏幕最大可見寬度。 |
| max-height | 定義輸出設(shè)備中的頁面最大可見區(qū)域高度力麸。 |
| max-monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)可款。 |
| max-resolution | 定義設(shè)備的最大分辨率。 |
| max-width | 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾取?/td> |
| min-aspect-ratio | 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率末盔。 |
| min-color | 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)筑舅。 |
| min-color-index | 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)座慰。 |
| min-device-aspect-ratio | 定義輸出設(shè)備的屏幕可見寬度與高度的最小比率陨舱。 |
| min-device-width | 定義輸出設(shè)備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設(shè)備的屏幕的最小可見高度版仔。 |
| min-height | 定義輸出設(shè)備中的頁面最小可見區(qū)域高度游盲。 |
| min-monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù) |
| min-resolution | 定義設(shè)備的最小分辨率。 |
| min-width | 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾取?/td> |
| monochrome | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)蛮粮。如果不是單色設(shè)備益缎，則值等于0 |
| orientation | 定義輸出設(shè)備中的頁面可見區(qū)域高度是否大于或等于寬度。 |
| resolution | 定義設(shè)備的分辨率然想。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設(shè)備的掃描工序莺奔。 |
| width | 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/td> |
【示例1】
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
【示例2】
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
