近年來隨著響應式佈局的發展，一次開發多次使用，自適應螢幕的響應式網站的需求越來越多。但怎樣使得網站能自適應螢幕呢？這裡就需要提到一個css3裡面新增的技術了-media媒體查詢器。
那麼什麼是media媒體查詢器呢？
Media媒體查詢器是CSS3新增的一個可以偵測開啟網站的終端機的螢幕解析度的技術。
Media媒體查詢器的使用方法大致如下：
#1.設定一個meta標籤如：
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
登入後複製
相關參數解釋：
device-width:定義輸出裝置的螢幕可見寬度。
device-height:定義輸出裝置的螢幕可見高度。
width = device-width#：寬度等於目前裝置的寬度。
initial-scale：初始的縮放比例（預設為1.0）。
minimum-scale：允許使用者縮放到的最小比例（預設為1.0）。
maximum-scale：允許使用者縮放到的最大比例（預設為1.0）。
user-scalable：使用者是否可以手動縮放（預設為no，因為我們不希望使用者放大縮小頁面）。
2.載入相容檔案js
為什麼載入相容檔案js呢？
因為IE8以上的核心是不相容html5以及CSS3 media的。所以需要載入兩個相容檔案使得我們的程式碼能夠實現出來。
1 <!--[if lt IE 9]>
2 <script src="
3 <script src="
4 <![endif]-->
登入後複製
也可以自行下載html5hiv.js和respond,js只需要在使用的時候修改對應的script裡面的src路徑就ok。
3.把IE的渲染方式調節到最高。閒在大多數的IE都是9以上的版本，這個版本的IE文檔模式不是最新的，或者說很多的小伙伴沒有註意這一點，所以可以通過下面的代碼實現保持IE的文檔模式保持最新的版本：
1 <meta http-equiv="X-UA-Compatible" content="IE=edge">
登入後複製
第二種方法：
1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
登入後複製
安裝一個Google chrome frame這個Google chrome外掛。這樣可以使得所有的瀏覽器都能夠使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝這個插件的話上面的程式碼是會使得瀏覽器一最高的文檔模式展現效果。
CSS3 media的標準寫法：
例如：當頁面小於960px的時候執行它下面的CSS程式碼。
1 @media screen and (max-width: 960px){
3 body{
5 background: #000;
7 }
9 }登入後複製
這段程式碼裡面有個screen，他的意思是在告知裝置在列印頁面時使用襯線字體。
CSS2 Media用法
其實不是只有CSS3才支援Media的用法，早在CSS2開始就已經支援Media，具體用法，就是在HTML頁面的head標籤中插入如下的一段程式碼：
1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">
登入後複製
想知道現在的行動裝置是不是縱向放置的顯示屏，可以這樣寫：
1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
登入後複製
第一段的程式碼也用CSS2來實現，讓它一樣可以讓頁面寬度小於960的執行指定的樣式檔：
1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
登入後複製
但是這個方法會增加http的造訪次數。所以用CSS3把所有的CSS寫在一起才是最ok的。
Ok，現在我們回到CSS3的media用法上面，前面講了用CSS3的寫螢幕寬度小於960px的尺寸的寫法，現在我們來寫一下等於960px的方法：
1 @media screen and （max-width-device：960px）{
2
3 Body{
4
5 Background：blue；
6
7
}
8
9 }登入後複製
寬度大於960px的寫法：
1 @media screen and(min-width:960px){
2
Body{
4
5 Background:red;
6
7
}
8
9
}登入後複製
前面就是常用的幾種寫法了，接下來對CSS3 media做一個總結：
width:瀏覽器可視寬度。
height:瀏覽器視覺高度。
device-width:裝置螢幕的寬度。
device-height:裝置畫面的高度。
orientation:偵測裝置目前處於橫向或縱向狀態。
aspect-ratio:偵測瀏覽器視覺寬度和高度的比例。 (例如：aspect-ratio:16/9)
device-aspect-ratio:偵測裝置的寬度和高度的比例。
color:偵測顏色的位數。 （例如：min-color:32就會偵測裝置是否擁有32位元顏色）
color-index:檢查裝置顏色索引表中的顏色，他的值不能是負數。
monochrome:偵測單色楨緩衝區域中的每個像素的位數。 （這個太高級，估計咱很少會用的到）
resolution#:檢測螢幕或印表機的解析度。 (例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：偵測輸出的裝置是網格的還是點陣圖裝置。
最後，附上一個趣味Demo結尾：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS3 media Test</title>
6 <meta name="author" content="LostWeapon" />
7 <style>
8 *{
9 text-align: center;
10 font-size: 20px;
11 }
12 p{
13 font-size: 14px;
14 }
15 @media screen and (min-resolution: 75.5dpcm) {
16 .normal{display:none;}
17 }
18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
19 .retina{display:none;}
20 }
21 </style>
22 </head>
23 <body>
24 <p class="retina">视网膜屏</br>哎呦 不错哦，小伙子有前途！</p>
25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看，说的就是你！</strong></p>
26 </body>
27 <footer>
28 <p>
29 Copyright ©2017 墨雨溪风
30 </p>
31 </footer>
32 </html>登入後複製
以上是CSS3media媒體查詢器使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
