一個(gè)普通的自適應(yīng)顯示的三欄網(wǎng)頁(yè)，當(dāng)你用不同的終端來查看這個(gè)頁(yè)面的時(shí)候，他會(huì)根據(jù)幾種終端來顯示不同的樣式，在電腦上是三列，在pad上應(yīng)該也是 三列，在大屏手機(jī)上是三行，在屏幕小于320的手機(jī)上只顯示主要內(nèi)容，隱藏掉了次要元素。（這里關(guān)于響應(yīng)式布局還有個(gè)比較好的消息，就是拖動(dòng)瀏覽器也可以 觸發(fā)判斷條件，測(cè)試的時(shí)候你不需要去找一堆手機(jī)，只要把自己的瀏覽器窗口縮小到一定尺寸就可以了，這個(gè)demo也可以用拖動(dòng)瀏覽器大小的方式測(cè)試。）

這就是一個(gè)最簡(jiǎn)單的 響應(yīng)式布局 的頁(yè)面。我們就從這個(gè)例子里認(rèn)識(shí)下media query屬性吧。

就從這個(gè)條件語(yǔ)句開始介紹，media屬性后面跟著的是一個(gè) screen 的媒體類型（上面說過的十種媒體類型之一）。然后用 and 關(guān)鍵字來連接條件（其他關(guān)鍵字還有 not， only，看字面大家能理解，就不多說。），然后括號(hào)里就是一個(gè)媒體查詢語(yǔ)句，稍微懂點(diǎn)css的同學(xué)都能看懂，這個(gè)條件語(yǔ)句意思是在大于320小于479 的分辨率下所激活的樣式表。

這個(gè)語(yǔ)句，就是響應(yīng)式布局的基礎(chǔ)應(yīng)用了。在判斷終端分辨率大小之后，賦予不同的樣式進(jìn)去，就像我們的例子里

至于要判斷多少種分辨率，完全取決于你產(chǎn)品的需求，常見的分辨率有手機(jī)，平板（注意這些終端是存在 橫屏 豎屏 區(qū)別的,這個(gè)下一篇里提），桌面顯示器。自己為自己所面對(duì)的終端定制樣式。

一般大于960的顯示器都可以用默認(rèn)樣式而不必在媒體查詢里判斷了。有一種情況除外，就是高像素比的終端，比如 iphone4以上的retina屏，一個(gè)iphone5的小小的屏幕（iphone的屏幕是真小?。?，他的分辨率竟然達(dá)到了1136*640，如何讓放 大了兩倍的屏幕顯示依然清晰？

在面對(duì)這種分辨率精細(xì)的終端，我們有另外一個(gè)條件查詢語(yǔ)句 device-pixel-ratio。

比如例子里的

就是判斷終端的像素比是2的話，所渲染的樣式。iphone4以上像素比是2，高分辨率Andriod設(shè)備像素比是1.5，例子里只有像素比為2的查詢，1.5的或者其他比例方法一樣，前面用的是幾種瀏覽器的私有屬性，最后一種是通用屬性，

等于

為了一些版本的兼容性，不得已寫的長(zhǎng)了。

在像素比為2的終端里這樣寫的目的，就是讓他顯示的更容易識(shí)別，一般來說顯示一張1px的背景圖片，我們要準(zhǔn)備一張2px的，然后再background-size:50%這樣。1.5像素比同例。

響應(yīng)式一個(gè)很大的缺點(diǎn)：需要多做若干背景圖（作為內(nèi)容顯示的圖片暫時(shí)無(wú)視，彈性圖片與彈性字體，下次單獨(dú)寫一篇介紹博文介紹）。

對(duì)于media query的兼容性，我想不是很重要，因?yàn)楹苌儆薪K端自帶IE9以下的瀏覽器。基本都是高級(jí)瀏覽器。如果特殊需要，可以下載一個(gè)兼容的JS文件

以條件注釋的方式加在文件里。