CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示。
媒體查詢可用于檢測(cè)很多事情，例如：
viewport(視窗) 的寬度與高度
設(shè)備的寬度與高度
朝向 (智能手機(jī)橫屏，豎屏) 。
分辨率
目前很多針對(duì)蘋果手機(jī)，Android 手機(jī)，平板等設(shè)備都會(huì)使用到多媒體查詢。
多媒體查詢語法
多媒體查詢由多種媒體組成，可以包含一個(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是用來排除掉某些特定的設(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)常看到。
實(shí)例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
/* 小于200px*/
@media only screen and (max-width:200px ) {
#p{
background: red;
}
}
/* 大于300px*/
@media only screen and (min-width:300px ) {
#p{
background: yellow;
}
}
</style>
</head>
<body>
<p id="p">小于200px背景變紅色大于300px背景為黃色</p>
</body>
</html>實(shí)例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
/body{background:blue;}/*寬度500px-800px之間+高度100px-400px之間 藍(lán)色*/
@media screen and (max-width:500px){body{background:green;}}/*寬度小于500px時(shí) 綠色*/
@media screen and (min-width:800px){body{background:red;}}/*寬度大于800px時(shí) 紅色*/
@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px時(shí) 黃色*/
@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px時(shí) 粉色*/
</style>
</head>
<body>
<p>效果演示，請(qǐng)縮小/擴(kuò)大瀏覽器的窗口大小注意背景色的變化。邏輯如下：</p>
<p>/*寬度500px-800px之間+高度100px-400px之間 藍(lán)色*/</p>
<p>/*寬度小于500px時(shí) 綠色*/</p>
<p>/*寬度大于800px時(shí) 紅色*/</p>
<p>/*高度小于100px時(shí) 黃色*/</p>
<p>/*高度大于400px時(shí) 粉色*/</p>
</body>
</html> 
