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

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

這段代碼的幾個參數(shù)解釋：

width = device-width：寬度等于當前設(shè)備的寬度

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

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

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

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

2.加載js

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

3.關(guān)于IE瀏覽器兼容問題

因為現(xiàn)在有許多用戶使用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開始就已經(jīng)支持Media，就是在HTML頁面的head標簽中插入如下的代碼：

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