宇易網絡談CSS3中媒體查詢的使用方式

隨著現在的手機用戶和平板用戶數量的迅猛增長，Web網站的更新又發生了翻天覆地的變化。很多人覺得在中國IE6的用戶群依然很多，這項技術暫時還沒法普及。如果你這么想就真的錯了，現在眾多大型網站已經開始大膽嘗試這項技術了。如果再不更新自己的知識，很快就要被淘汰了。今天泰州網絡公司宇易網(wang)絡(luo)為大家總結一下響應式設(she)計中Media的(de)用法：

準備工作1：設置Meta標簽

首先我們在使用Media的時候(hou)需(xu)要先設(she)(she)置下面這段代碼(ma)，來兼(jian)容移(yi)動設(she)(she)備的展示效果(guo)：

這段代碼(ma)的幾(ji)個參數解釋：

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

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

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

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

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

準備工作2：加載兼容文件JS

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

準備工作3：設置IE渲染方式默認為最高(這部分可以選擇添加也可以不添加)

現在有很多人(ren)的(de)(de)IE瀏覽器(qi)(qi)都升級到IE9以(yi)上了，所以(yi)這個時(shi)候就有又(you)很多詭(gui)異的(de)(de)事情發生了，例(li)如現在是IE9的(de)(de)瀏覽器(qi)(qi)，但是瀏覽器(qi)(qi)的(de)(de)文檔模式卻是IE8:

為了(le)防止這種(zhong)情況，我們需要(yao)下面這段代碼(ma)來讓IE的(de)文(wen)檔(dang)模(mo)式永遠都是(shi)最新的(de)：

太給力了。

不過我最(zui)近又發現(xian)了(le)一個更給力的寫法：

怎么(me)這(zhe)(zhe)段代(dai)碼后面加了(le)一(yi)個(ge)chrome=1，這(zhe)(zhe)個(ge)Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果有(you)的(de)(de)(de)(de)用(yong)(yong)(yong)戶電(dian)腦里面裝了(le)這(zhe)(zhe)個(ge)chrome的(de)(de)(de)(de)插件，就可(ke)(ke)以(yi)讓電(dian)腦里面的(de)(de)(de)(de)IE不(bu)(bu)管是哪個(ge)版本(ben)的(de)(de)(de)(de)都可(ke)(ke)以(yi)使(shi)用(yong)(yong)(yong)Webkit引擎(qing)及V8引擎(qing)進行排(pai)版及運算(suan)，無比給力，不(bu)(bu)過(guo)如果用(yong)(yong)(yong)戶沒裝這(zhe)(zhe)個(ge)插件，那(nei)這(zhe)(zhe)段代(dai)碼就會(hui)讓IE以(yi)最(zui)高的(de)(de)(de)(de)文檔模式(shi)展現(xian)效果。這(zhe)(zhe)段代(dai)碼我還是建(jian)議你(ni)們(men)用(yong)(yong)(yong)上(shang)，不(bu)(bu)過(guo)不(bu)(bu)用(yong)(yong)(yong)也是可(ke)(ke)以(yi)的(de)(de)(de)(de)。

進入CSS3 Media寫法

我們先來看下下面這(zhe)(zhe)段代碼，估計很多人在響應式的(de)網站CSS很經常(chang)看到(dao)類似(si)下面的(de)這(zhe)(zhe)段代碼：

@media screen and (max-width: 960px){

body{
        background: #000;

}

}

這個(ge)應該算是一(yi)個(ge)media的(de)一(yi)個(ge)標準寫法，上面這段CSS代碼意思是：當頁面小于960px的(de)時(shi)候執(zhi)行它下面的(de)CSS.這個(ge)應該沒有太(tai)大(da)疑問。

應該有人會發現(xian)上面這段代(dai)碼里(li)面有個screen，他的意(yi)思是(shi)在告(gao)知設備(bei)在打(da)印頁(ye)面時使用(yong)襯(chen)線字(zi)(zi)體，在屏幕上顯(xian)示(shi)時用(yong)無襯(chen)線字(zi)(zi)體。但(dan)是(shi)目前我發現(xian)很多網(wang)站都會直接(jie)省略(lve)screen,因為(wei)你(ni)的網(wang)站可能(neng)不需要(yao)考慮用(yong)戶去打(da)印時，你(ni)可以直接(jie)這樣寫：

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

}

}

CSS2 Media用法

其(qi)實(shi)并不是(shi)只有CSS3才支持(chi)Media的(de)用(yong)法，早在(zai)CSS2開始就已經(jing)支持(chi)Media，具體用(yong)法，就是(shi)在(zai)HTML頁面的(de)head標簽中插入如下的(de)一段代碼(ma)：

上(shang)(shang)面其(qi)實(shi)是CSS2實(shi)現(xian)的襯線(xian)用法(fa)，那CSS3的media難道就只能(neng)(neng)支(zhi)持上(shang)(shang)面這(zhe)一個(ge)功能(neng)(neng)嗎？答案(an)當然不是，他(ta)還有很多用法(fa)。

例如我們想知道現在(zai)的(de)移動設備是不是縱向(xiang)放(fang)置的(de)顯示屏，可以這(zhe)樣寫(xie)：

我們把第一段的(de)(de)代碼也(ye)用CSS2來實現(xian)，讓(rang)(rang)它一樣可以讓(rang)(rang)頁面寬度小于960的(de)(de)執行指定的(de)(de)樣式文件：

既然CSS2可以實(shi)現CSS的這個效果為什么不用這個方法(fa)呢，很多人應該會問，但是(shi)上面(mian)這個方法(fa)，最(zui)大的弊(bi)端是(shi)他會增加(jia)頁面(mian)http的請求(qiu)次(ci)數，增加(jia)了頁面(mian)負(fu)擔，我們(men)用CSS3把樣式都寫在(zai)一(yi)個文件里面(mian)才是(shi)最(zui)佳(jia)的方法(fa)。

回歸CSS3 Media

上面我們(men)大概講了下CSS2的媒體查詢用(yong)法，現在我們(men)重新回到CSS3的媒體查詢，在第一段代(dai)碼(ma)上面我用(yong)的是小(xiao)于960px的尺(chi)寸的寫法，那現在我們(men)來實現等于960px尺(chi)寸的代(dai)碼(ma)：

@media screen and (max-device-width:960px){
    body{

      background:red;

}

}

然后就是當瀏覽器尺寸大于960px時候(hou)的代(dai)碼了：

@media screen and (min-width:960px){
    body{
        background:orange;

}

}

我們還可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;

}

}

上面的(de)這段代碼的(de)意思是當頁(ye)面寬(kuan)度大于(yu)(yu)960px小于(yu)(yu)1200px的(de)時候執行下面的(de)CSS。

Media所有參數匯總

以上就是我們(men)最常(chang)需要用到(dao)的(de)媒(mei)體查詢器(qi)的(de)三個特性，大(da)于，等于，小于的(de)寫法。媒(mei)體查詢器(qi)的(de)全部功(gong)能肯定不止(zhi)這三個功(gong)能，下面是我總(zong)結的(de)它(ta)的(de)一些(xie)參數用法解釋：

width:瀏(liu)覽器可視(shi)寬(kuan)度。

height:瀏(liu)覽器可視高(gao)度(du)。

device-width:設備屏幕(mu)的寬度。

device-height:設備屏幕的高度。

orientation:檢測(ce)設備目前處于橫向還是縱向狀態。

aspect-ratio:檢測瀏覽器(qi)可視寬度和(he)高度的(de)比例(li)。(例(li)如(ru)：aspect-ratio:16/9)

device-aspect-ratio:檢測設(she)備的(de)寬(kuan)度和高(gao)度的(de)比例。

color:檢測顏色的位(wei)數。（例(li)如：min-color:32就(jiu)會(hui)檢測設備是否(fou)擁有32位(wei)顏色）

color-index:檢查設備顏色索引表中的顏色，他的值不能(neng)是(shi)負(fu)數。

monochrome:檢(jian)測單(dan)色楨緩沖區(qu)域中的每個像素(su)的位(wei)數(shu)。（這個太高級，估計咱很少會用的到）

resolution:檢測(ce)屏幕或(huo)打印(yin)機的(de)分辨率。(例如：min-resolution:300dpi或(huo)min-resolution:118dpcm)。

grid：檢測輸出的(de)設備是網格(ge)的(de)還是位圖設備。