CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有想法： 取代了查找裝置的類型，CSS3 根據(jù)設(shè)定自適應(yīng)顯示。
媒體查詢可用於偵測許多事情，例如：
viewport(視窗) 的寬度與高度
裝置的寬度與高度
朝向(智能手機(jī)橫屏，垂直屏) 。
解析度
目前很多針對蘋果手機(jī)，Android 手機(jī)，平板等裝置都會使用到多媒體查詢。
多媒體查詢語法
#多媒體查詢由多種媒體組成，可以包含一個或多個表達(dá)式，表達(dá)式根據(jù)條件是否成立回傳true 或false。
@media not|only mediatype and (expressions) {
? ? CSS-Code ;
}
如果指定的多媒體類型符合裝置類型則查詢結(jié)果傳回true，文件會在符合的裝置上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應(yīng)在所有裝置上顯示效果。
not: not是用來排除掉某些特定的設(shè)備的，例如 @media not print（非列印設(shè)備）。
only: 用來定某種特別的媒體類型。對於支援Media Queries的行動裝置來說，如果存在only關(guān)鍵字，行動裝置的網(wǎng)頁瀏覽器會忽略only關(guān)鍵字並直接根據(jù)後面的表達(dá)式應(yīng)用程式樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type類型的網(wǎng)頁瀏覽器，遇到only關(guān)鍵字時會忽略這個樣式檔。
all: 所有設(shè)備，這個應(yīng)該經(jīng)?？吹健?
實例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>實例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時 綠色*/
@media screen and (min-width:800px){body{background:red;}}/*寬度大于800px時 紅色*/
@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px時 黃色*/
@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px時 粉色*/
</style>
</head>
<body>
<p>效果演示，請縮小/擴(kuò)大瀏覽器的窗口大小注意背景色的變化。邏輯如下：</p>
<p>/*寬度500px-800px之間+高度100px-400px之間 藍(lán)色*/</p>
<p>/*寬度小于500px時 綠色*/</p>
<p>/*寬度大于800px時 紅色*/</p>
<p>/*高度小于100px時 黃色*/</p>
<p>/*高度大于400px時 粉色*/</p>
</body>
</html> 
