CSS3 多媒體查詢
CSS2 多媒體類型
@media 規(guī)則在 CSS2 中有介紹，針對(duì)不同媒體類型可以定制不同的樣式規(guī)則。
例如：你可以針對(duì)不同的媒體類型(包括顯示器、便攜設(shè)備、電視機(jī)，等等)設(shè)置不同的樣式規(guī)則。
但是這些多媒體類型在很多設(shè)備上支持還不夠友好。
CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示。
媒體查詢可用于檢測(cè)很多事情，例如：
viewport(視窗) 的寬度與高度
設(shè)備的寬度與高度
朝向 (智能手機(jī)橫屏，豎屏) 。
分辨率
目前很多針對(duì)蘋果手機(jī)，Android 手機(jī)，平板等設(shè)備都會(huì)使用到多媒體查詢。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。
多媒體查詢語(yǔ)法
多媒體查詢由多種媒體組成，可以包含一個(gè)或多個(gè)表達(dá)式，表達(dá)式根據(jù)條件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS-Code;
}如果指定的多媒體類型匹配設(shè)備類型則查詢結(jié)果返回 true，文檔會(huì)在匹配的設(shè)備上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會(huì)適應(yīng)在所有設(shè)備上顯示效果。
not: not是用來(lái)排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）。
only: 用來(lái)定某種特別的媒體類型。對(duì)于支持Media Queries的移動(dòng)設(shè)備來(lái)說(shuō)，如果存在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)?？吹健?/p>
你也可以在不同的媒體上使用不同的樣式文件：
CSS3 多媒體類型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒體類型設(shè)備 |
| 用于打印機(jī) | |
| screen | 用于電腦屏幕，平板，智能手機(jī)等。 |
| speech | 用于屏幕閱讀器 |
多媒體查詢簡(jiǎn)單實(shí)例
使用多媒體查詢可以在指定的設(shè)備上使用對(duì)應(yīng)的樣式替代原有的樣式。
以下實(shí)例中在屏幕可視窗口尺寸大于 480 像素的設(shè)備上修改背景顏色:
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置瀏覽器窗口查看效果！</h1>
<p>如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變。</p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例在屏幕可視窗口尺寸大于 480 像素時(shí)將菜單浮動(dòng)到頁(yè)面左側(cè)：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.wrapper {overflow:auto;}
#main {margin-left: 4px;}
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}
.menuitem {
background:#CDF0F6;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>重置瀏覽器窗口查看效果！</h1>
<p>在屏幕可視窗口尺寸小于 480 像素時(shí)將菜單浮動(dòng)到頁(yè)面左側(cè)。</p>
</div>
</div>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 @media 參考
更多多媒體查詢內(nèi)容可以參考@media 規(guī)則。