隨著響應式設計模型的誕生，Web網站又要發生翻天腹地的改革浪潮，再不更新知識你就老了。我今天就總結一下響應式設計的核心CSS技術Media(媒體查詢器)的用法。

1.設置兼容移動設備的展示效果，首先把Meta標簽寫上，

這段代碼的幾個參數解釋：

width = device-width：寬度等于當前設備的寬度

initial-scale：初始的縮放比例（默認設置為1.0）  

minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）    

maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0） 

user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面） 

2.加載js

因為IE8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：

3.關于IE瀏覽器兼容問題

因為現在有許多用戶使用IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:所以需把

content="IE=Edge

content="IE=Edge的意思  IE的文檔模式永遠都是最新的。

的意思  IE的文檔模式永遠都是最新的。

4.CSS3 Media寫法

@media screen and (max-width: 960px){
     body{
         background: #000;
     }
 }

這段代碼的意思是：頁面小于960px的時候這行他下邊的css。

5.css2用法

其實不只是有CSS3支持，早在css2開始就已經支持Media，就是在HTML頁面的head標簽中插入如下的代碼：

以上就是我們最常需要用到的媒體查詢器的三個特性，大于，等于，小于的寫法。