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

1.設(shè)置兼容移動(dòng)設(shè)備的展示效果，首先把Meta標(biāo)簽寫(xiě)上，

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

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

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

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

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

user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁(yè)面） 

2.加載js

因?yàn)镮E8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個(gè)JS文件，來(lái)保證我們的代碼實(shí)現(xiàn)兼容效果：

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

因?yàn)楝F(xiàn)在有許多用戶使用IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:所以需把

content="IE=Edge

content="IE=Edge的意思  IE的文檔模式永遠(yuǎn)都是最新的。

的意思  IE的文檔模式永遠(yuǎn)都是最新的。

4.CSS3 Media寫(xiě)法

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

這段代碼的意思是：頁(yè)面小于960px的時(shí)候這行他下邊的css。

5.css2用法

其實(shí)不只是有CSS3支持，早在css2開(kāi)始就已經(jīng)支持Media，就是在HTML頁(yè)面的head標(biāo)簽中插入如下的代碼：

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