最近幾年隨著響應式佈局的發展，一次開發多次使用，自適應屏幕的響應式網站的需求越來越多。但是怎樣使得網站能自適應屏幕呢？這裡就需要提到一個css3裡面新增的技術了-media媒體查詢器。 那麼什麼是media媒體查詢器呢？ Media媒體查詢器是CSS3新增的一個可以檢測打開網站的終端的屏幕解析度的技 ...
最近幾年隨著響應式佈局的發展，一次開發多次使用，自適應屏幕的響應式網站的需求越來越多。但是怎樣使得網站能自適應屏幕呢？這裡就需要提到一個css3裡面新增的技術了-media媒體查詢器。
那麼什麼是media媒體查詢器呢？
Media媒體查詢器是CSS3新增的一個可以檢測打開網站的終端的屏幕解析度的技術。
Media媒體查詢器的使用方法大致如下：
1.設置一個meta標簽如：
1 <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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 3 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 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 3 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 div{ 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 <div> 29 Copyright ©2017 墨雨溪風 30 </div> 31 </footer> 32 </html>
文章不妥之處請各位前輩指正，謝謝！
