那麼什麼是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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
