構建響應式頁面所用的css樣式以及方法

目前已經愈來愈多的站點以及wap站點使用響應式設計，由於大屏幕的移動設備愈來愈普及。而自適應佈局已經沒法勝任各類瀏覽需求。響應式設計的目的是儘量以最好的佈局顯示您的數據，以實現用戶友好的 Web 頁面。

如今CSS3有了個更爲實用的 media query。而移動終端的瀏覽器基本已經徹底支持了css3.他能夠爲你獲取各類終端的數據。

先舉個例子，你們看這個demo。（因爲相應區域過大，就不截圖了，請你們點擊打開這個鏈接）

http://www.caihong.cc/demo/media/

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

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

1. ‍       @media screen and (min-width: 320px) and (max-width : 479px)

就從這個條件語句開始介紹，media屬性後面跟着的是一個 screen 的媒體類型（上面說過的十種媒體類型之一）。而後用 and 關鍵字來鏈接條件（其餘關鍵字還有 not， only，看字面你們能理解，就很少說。），而後括號裏就是一個媒體查詢語句，稍微懂點css的同窗都能看懂，這個條件語句意思是在大於320小於479的分辨率下所激活的樣式表。

這個語句，就是響應式佈局的基礎應用了。在判斷終端分辨率大小以後，賦予不一樣的樣式進去，就像咱們的例子裏

1.        @media screen and (max-width : 320px){

2.        body{...}

3.        }

4.        @media screen and (min-width: 800px) and (max-width: 1024px){

5.        body{...}

6.        }

至於要判斷多少種分辨率，徹底取決於你產品的需求，常見的分辨率有手機，平板（注意這些終端是存在 橫屏 豎屏 區別的），桌面顯示器。本身爲本身所面對的終端定製樣式。

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

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

好比例子裏的

1.        @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

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

1.        @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

等於

1.        @media only screen and (min-device-pixel-ratio: 2)

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

1.        body{

2.        font-size:24px;

3.        }

4.        .box2{

5.        background: url(d/20.png) #ccc;

6.        background-size:50%;

7.        }

在像素比爲2的終端裏這樣寫的目的，就是讓他顯示的更容易識別，通常來講顯示一張1px的背景圖片，咱們要準備一張2px的，而後再background-size:50%這樣。1.5像素比同例。

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

這裏也暴露了響應式一個很大的缺點：須要多作若干背景圖（做爲內容顯示的圖片暫時無視，彈性圖片與彈性字體，下次單獨寫一篇介紹博文介紹）。

對於media query的兼容性，我想不是很重要，由於不多有終端自帶IE9如下的瀏覽器。基本都是高級瀏覽器。若是特殊須要，能夠下載一個兼容的JS文件

1.        <!--[if lt IE 9]>

2.        <script  src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">  </script>

3.        <![endif]-->

以條件註釋的方式加在文件裏。