響應式Web設計實戰總結

 響應性web設計的理念是：頁面的設計與開發應當根據使用者行為與裝置環境(包括系統平臺，螢幕尺寸，螢幕定向等)進行相應的響應及調整。具體的實踐方式由多方面組成，包括彈性網格和佈局，圖片，css Media(媒體查詢)使用等。

一：佈局方式有如下幾種：

1. 固定佈局：固定佈局以PX(畫素)作為單位的，在PC端，設計稿多少PX就寫多少PX，前幾年都是這種佈局，常見的是以960px或者1000px來設計的，但是這樣設計有如下缺點：

1.頁面很死板，在更大的螢幕上，頁面左右2邊留白。

2. 不適應響應性佈局。

 2.  流式佈局：流式佈局是以百分比作為單位的，我們要牢記如下公式：

百分比寬度 = 目標元素寬度 / 上下文元素寬度

這種佈局優點：可以自適應佈局，根據不同的解析度顯示不同的寬度。

缺點：在行高或者marginTop在大螢幕下看起來太高，在小螢幕下看起來太窄。

3   彈性佈局：彈性佈局是以em作為單位的，同樣彈性佈局也支援如下公式：

百分比尺寸 = 目標元素尺寸 / 上下文元素尺寸

使用em將文字畫素px轉換為相對單位，現在瀏覽器預設文字的大小是16px，如果一個文字大小是48px，上下文元素是(瀏覽器)，那麼轉換成em 就是 48/16 = 3em. 但是如果一個h1標籤的font-size是48px, h1標籤內部span標籤font-size 是24px,那麼h1標籤的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 =0.5em}.彈性佈局也支援響應性web設計。

二： 媒體查詢：

根據特定的環境查詢各種屬性值，比如裝置的寬度，是否橫向使用不同的css樣式來渲染。

媒體查詢使用如下：比如內聯樣式可以如下寫：

1. 最大寬度960px一種佈局：

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

2. 最小寬度600px 另一種佈局：

@media screen and (min-width:600px) {}

3. 寬度在600px 到 960px之間，如下:

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

外聯樣式使用link標籤來引用樣式：

如果對於像ipad來說，我們可以在上面增加一個屬性 orientation(landscape或portrait) 橫屏或者豎屏。

理解meta各個屬性的含義：

做h5頁面移動端開發需要在head標籤內引入下面這句話。（如果沒有引入的話，頁面的字型等大小就不正常了）。

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />

具體含義如下：

1. Width: 控制viewport的大小。如device-width為裝置的寬度。
2. Height: 和width相對應，指定高度。
3. initial-scale: 初始縮放比例，頁面第一次載入時的縮放比例。
4. maximum-scale 允許使用者縮放到的最大比例，範圍從0到10.0
5. minimum-scale: 允許使用者縮放到的最小比例，範圍從0到10.0
6. user-scalable： 使用者是否可以手動縮放，值可以是:

1，  yes,true允許使用者縮放；

2,  no、false不允許使用者縮放。 (只設定這一個屬性，有的瀏覽器並不生效，我們需要配合maxinum-scale和mininum-scale最大縮放                與最小縮放分別為1:1)。

想深入理解meta及viewport各個屬性，可以看 “無雙” 下面這篇部落格講的非常詳細。如下：

http://www.cnblogs.com/2050/p/3877280.html#3075885

綜合：流式佈局和彈性佈局及配合媒體查詢 是 響應性佈局的最好方式。

但是針對響應性web佈局使用媒體查詢也有缺點的,缺點如下：

對於設計師：要針對不同的螢幕大小設計不同的設計，（例如寬屏下的三欄設計、普通螢幕下的兩欄設計以及移動裝置上的單欄設計等）。對於前端對於不同的螢幕要寫不同的樣式，增加了工作量，同時維護起來不是很方便(要維護幾份不同的css)。

三：圖片

1. 對於背景圖片來說，css3有個屬性 background-size可以等比例縮放縮放背景圖片。

但是對於小螢幕的移動裝置去載入大背景圖片的話，有缺點的，最主要的缺點是要更大的頻寬，浪費流量。所以我們要想做的更好的話，可以使用媒體查詢根據裝置的寬度來         渲染不同大小的背景圖片。

2. 對於頁面上的<img/>標籤圖片的話：

1. 如果只是頁面上靜態圖片的話，不考慮頻寬的情況下，可以使用width=”100%”等比例縮放，如：<img src=”XX.png” width=”100%”/>

2. 如果是商品圖或者頁面上有多個的話，考慮不浪費不必要的頻寬，需要後臺根據不同的裝置寬度大小來返回不同的json資料的圖片來給我們前端，之後我們前端使用JS動態的渲染出來。

在現代瀏覽器中（包括IE7+）中要實現圖片隨著流動佈局相應縮放非常簡單，只需要在css中加上這麼一句程式碼：

含義是：確保圖片的最大寬度不會超過瀏覽器的視窗或其容器可視部分的寬度，所以當視窗或容器的可視部分變窄時，圖片的最大寬度值也會相應的變小，圖片本身永遠不會覆蓋容器。

四：理解css單位px，em，rem的區別：

1.  Px是css中最基本的長度單位，在PC端，設計稿多少畫素，頁面css就寫多少畫素。

2.  em 是相對單位，相對於上下文元素而言，一般情況下，瀏覽器預設的字型大小是16px，也就是1em等於16px；比如：

如果一個文字大小是48px，上下文元素是(瀏覽器)，那麼轉換成em 就是 48/16 = 3em. 但是如果一個h1標籤的font-size是48px, h1            標籤內部span標籤font-size 是 24px,那麼h1標籤的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 = 0.5em}.

3. rem也是相對單位。rem是相對於html根元素來計算的，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同           em，預設1rem=16px; 同理你可以 設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。

比如設定html根元素 如下程式碼：

當一個p元素是24px的話，那麼轉換成rem為單位的話，那麼只需要如下這樣寫即可：

五：元素未知寬度居中。

我們先來介紹一下未知寬度，元素居中的方法，對於響應性web設計是有幫助的，我們可以來了解下。

第一種方法：

假如頁面html結構如下：

只需要給父級元素div 設定 文字對齊是 居中對齊。子元素設定display:inline-block即可。如下程式碼：

第二種方法如下：

六：媒體查詢標準寫法：

在css2.1中定義了10種裝置型別，分別如下：

Css裝置特性共有13種，是一個類似於CSS屬性的集合。但與CSS屬性不同的是，大部分裝置特性的指定值接受min/max的字首，用來表示大於等於或小於等於的邏輯，以此避免使用<和>這些字元。

裝置特性如下表：

上面是一些響應式web設計的基本知識點，下面我們可以詳細講解下響應式web設計如何實踐？

1. 首先需要在頁面頭部引入這行meta程式碼，如下：

它的意思我這裡不說了，如果不明白的話，可以看上面 提到的 無雙那篇部落格 很詳細。

還要引入這一句：

我們的程式碼有類似於電話這樣的數字的時候，因為有的手機上它會自動轉換成可以撥打電話，所以我們加上這句就不會了。

比如我頁面引入如下：

2. 響應性web設計需要使用css3媒體查詢media來寫不同的css樣式。在移動端瀏覽器中或者某些桌面瀏覽器中，window物件有一個devicePixelRatio屬性，它的官方定義為，裝置的物理畫素與裝置的獨立畫素的比列，也就是 devicePixelRatio = 裝置的物理畫素/ 裝置的獨立畫素。這三個引數不是固定的，只要其中2個確定了，那麼就可以知道第三個引數了，裝置的物理畫素我們可以對映到裝置的解析度的寬度，獨立畫素我們可以對映到媒體查詢media定義的寬度。而比列devicePixelRatio我們可以理解為css中的1畫素(px)在裝置上佔用多少個物理畫素。比如我們目前常見的手機解析度如下：

如上小米3解析度為1080，獨立畫素為360px，那麼比列為3，也就是一個css的1px，佔用3個物理畫素，小米2和紅米Note解析度為720，獨立畫素還是360px，所以比列為2，所以小米3相對於小米2與紅米Note更清晰。同理iphone和其他型別的手機也一樣。

而上面說的獨立畫素就是360px，正是我們css中的媒體查詢關聯的。

如下我們可以在css加上這樣的媒體查詢就可以匹配到樣式了；如下：

/* 針對手機螢幕的寬度是360 384等螢幕的寬度

*width(寬度可以設定為384px) max-width:384來計算 但是邊距 字型大小等還是安裝360px來計算

*****************************************/

而我們目前的獨立畫素有320,400的，我們也可以增加css媒體查詢。如下：

但是也還有些目前還未知的獨立畫素，比如未來的某時刻有大於640px的獨立畫素，或者是說我們手機移到豎屏時候，我們也可以針對適應的做一點匹配。如下我們針對640px-999px做一個匹配。

我們都知道在IE6-8下 IE是不支援css3中的媒體查詢的，所以在網上有大牛已經幫我們考慮到這個問題了，所以只需要在網上下載 respond.js下來放到我們本地，然後頁面上引入即可。respond.js的github地址如下：

https://github.com/scottjehl/Respond/

通過以上：我們可以對編寫css響應性web設計有一個規範，如下：(當然如果大家有更好的方法也可以提出來。)

1. 頭部reset.css 是否要獨立出來一個css檔案，或者不獨立出來 直接放在css頂部。

2. 公用的頭部或者尾部樣式 直接放在css檔案頂部，及公用的頁面css樣式放在頂部(新增註釋。)

3. 媒體查詢css樣式分別如下組織：

1. 移動端開發css媒體查詢 程式碼組織如下：

2. 在PC端 1000以上的媒體查詢寫在如下里面：

4. 基本的編碼規範注意事項如下：

1.給html根元素字型大小定義相對單位(rem)如下：

之後的元素字型使用rem作為單位。比如h2字型大小是24px，那麼在移動端 字型大小設定為 font-size:2.4rem 在媒體查詢
@media (min-width:1000) {}內 字型大小希望可以寫2個，font-size:24px;font-size:2.4rem,這是為了未來的移動裝置獨立畫素
超過1000後能使用rem作單位。

2.根據設計稿給body元素設定預設的font-size及color，之後的媒體查詢根據自身的條件需要覆蓋font-size及color的話 就覆蓋掉。

3.在對應的裝置媒體查詢內，有很多公用的css樣式希望合併，比如這樣的：

可以直接合併成如下：

編寫響應性web設計css媒體查詢更好的方案思考？

我們都知道，為了自適應各種裝置，我們需要編寫不同的css進行適配，比如寬度，外邊距，內邊距，字型大小等不同，需要不同的適配，那麼我們現在能不能編寫一份css呢，比如我編寫一份針對：獨立畫素為400螢幕寬度的 編寫一份css樣式，然後其他的樣式，比如320的，384的，360的或者640以上的，針對這些css樣式，我們能不能使用NodeJS來自動讀取400的css，然後分別對上面獨立畫素大小的螢幕進行比例一下，比如螢幕400畫素的 font-size:24px 那麼 320px的螢幕字型大小就是 font-size = Math.floor(320*24/400),其他css屬性都按照這種方式來做，那麼在本地就可以生成不同的版本css了(比如針對320版本的，針對640以上css版本的)，然後在head頭部分別引入不同的css版本，比如如下引入：

我們知道，只要裝置的寬度在以上任何一種的時候 只會渲染一份css，其他的css不渲染，所以我們可以按照這種方式來做一份css。至於這種方案我以後會使用nodeJS來做出來的。最後我提供一個可執行的demo吧，你們可以下載下面的demo，放在本地伺服器下執行下，在手機端看下，就可以針對不同的裝置大小來做適配的，不過我這個demo沒有做的很全面，目前只適配了320的 360-399的 400的 1000以上的，暫時沒有適配640的，所以如果測試的時候，手機橫屏的時候部分會沒有css樣式的，這也很正常的，因為我只是做demo的，沒有做的那麼全的匹配，只是想說 響應性web設計匹配就是這麼一個意思 一個demo。現在廢話不多說了，有興趣的話，可以看如下demo。

demo下載