CSS3響應式設計布局教程，目前網頁應用范圍廣泛、PC電腦、移動設備、平板電腦、手機等大多設備具有瀏覽器功能，響應式設計的目的是盡可能以最好的布局顯示您的數據，以實現用戶友好的 Web 頁面。
 

css2的時期有一個不是很常用的media type，他擁有比如aural（聲音）braille（觸摸）print（打印）handheld（移動設備）等等十種媒體類型，（附加媒體類型詳細http://www.w3.org/TR/CSS2/media.html#media-types）利用@media規則可以在同一樣式表里為不同終端使用不同的樣式。尷尬的是這個media type并沒有被多少終端真正的支持。
 

現在CSS3有了個更為實用的 media query。而移動終端的瀏覽器基本已經完全支持了css3.他可以為你獲取各種終端的數據。
 

先舉個例子，大家看這個demo。（由于相應區域過大，就不截圖了，請大家點擊打開這個連接）

http://www.internetke.com/uploads/flink/0009/index.html
 

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

這就是一個最簡單的 響應式布局 的頁面。我們就從這個例子里認識下media query屬性吧。

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

這個語句，就是響應式布局的基礎應用了。在判斷終端分辨率大小之后，賦予不同的樣式進去，就像我們的例子里

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

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

在面對這種分辨率精細的終端，我們有另外一個條件查詢語句 device-pixel-ratio。

比如例子里的

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

等于

為了一些版本的兼容性，不得已寫的長了。

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

比如上面的demo，如果你用iphone4以上的蘋果手機來看，中間的背景圖片應該是顯示“2.0像素比”。

對于media query的兼容性，我想不是很重要，因為很少有終端自帶IE9以下的瀏覽器。基本都是高級瀏覽器。如果特殊需要，可以下載一個兼容的JS文件

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