CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示。
媒體查詢可用于檢測很多事情，例如：
viewport(視窗) 的寬度與高度
設(shè)備的寬度與高度
朝向 (智能手機橫屏，豎屏) 。
分辨率
目前很多針對蘋果手機，Android 手機，平板等設(shè)備都會使用到多媒體查詢。
多媒體查詢語法
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據(jù)條件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS-Code;
}
如果指定的多媒體類型匹配設(shè)備類型則查詢結(jié)果返回 true，文檔會在匹配的設(shè)備上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應(yīng)在所有設(shè)備上顯示效果。
not: not是用來排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）。
only: 用來定某種特別的媒體類型。對于支持Media Queries的移動設(shè)備來說，如果存在only關(guān)鍵字，移動設(shè)備的Web瀏覽器會忽略only關(guān)鍵字并直接根據(jù)后面的表達式應(yīng)用樣式文件。對于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到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之間 藍色*/
@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>效果演示，請縮小/擴大瀏覽器的窗口大小注意背景色的變化。邏輯如下：</p>
<p>/*寬度500px-800px之間+高度100px-400px之間 藍色*/</p>
<p>/*寬度小于500px時 綠色*/</p>
<p>/*寬度大于800px時 紅色*/</p>
<p>/*高度小于100px時 黃色*/</p>
<p>/*高度大于400px時 粉色*/</p>
</body>
</html> 
![Beginnen Sie schnell mit dem Golang Gin-Framework [Verwenden Sie Gin, um ein gleichzeitiges IM-Instant-Messaging-System auf Millionenebene aufzubauen]](https://img.php.cn/upload/course/000/000/068/63a2b21046723283.jpg)
