概念

響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對于設計的全新思維模式；我們應當向下兼容、移動優先。

背景

PC互聯網加速向移動端遷移：2012年12月底我國網民規模達到5.64億，互聯網普及率為42.1%，手機用戶占網民總數的74.5%。預計到2015年，移動互聯網的數據流量將超越PC端的流量。

移動端入口：當用戶希望通過手機來完成PC頁的操作時，常見的是商家的運營微博，期文案足夠吸引用戶點擊鏈接參加活動，如果該活動頁沒做響應式處理：頁面體積大、請求多、體驗差、兼容性差，層層阻礙最終導致用戶放棄參加。

優勢

開發成本低，門檻低

• Native APP：Objective-C or Java – 學習成本高
• Hybrid APP： 外殼+Web APP，需安裝。
• 響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快

跨平臺和終端且不需要分配子域

雖然可通過監測用戶UA來判斷用戶終端后做跳轉，但它還是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不同的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。

• PC – http://qzone.com
• Mobile – http://m.qzone.com
• 響應式：PC & Mobile – http://qzone.com 無需跳轉

本地存儲

Web App可以利用本地存儲的特性將重要和重復的數據保存在本地，避免頁面的重復刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內容。

無需安裝成本，迭代更新容易

更靈活、更方便的APP使用及安裝方式將成為HTML5在移動平臺上大放異彩的保障之一

實施

首先我們應該遵循移動優先原則，交互&設計應以移動端為主，PC則作為移動端的一個擴展；
一個頁面需要兼容不同終端，那么有兩個關鍵點是我們需要去做到響應式的：

1. 響應式布局
2. 響應式內容（圖片、多媒體）

響應式布局

如我們需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設計方案滿足所有情況？

那么我們的布局應該是一種彈性的柵格布局，不同尺寸下彈性適應，如以下頁面中各模塊在不同尺寸下的位置：

那么我們要怎么做？

Meta標簽定義

使用 viewport meta 標簽在手機瀏覽器上控制布局

1

通過快捷方式打開時全屏顯示

1

隱藏狀態欄

1

iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉

1

神飛：很多人常常使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染而不會自動縮放，用戶需要手動移動頁面或者縮放。最差的是和initial-scale=1同時使用user-scalable=no或maximum-scale=1，這將使你的網站不能被縮放——用戶不能放大/縮小網頁來看到全部的內容。所以，請記?。喝绻愕木W站不是響應式的，請不要使用initial-scale或者禁用縮放。

使用 Media Queries 適配對應樣式

常用于布局的CSS Media Queries有以下幾種

設備類型(media type):

all所有設備
screen 電腦顯示器
print打印用紙或打印預覽視圖
handheld便攜設備
tv電視機類型的設備
speech語意和音頻盒成器
braille盲人用點字法觸覺回饋設備
embossed盲文打印機
projection各種投影設備
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端

設備特性(media feature):

width瀏覽器寬度
height瀏覽器高度
device-width設備屏幕分辨率的寬度值
device-height設備屏幕分辨率的高度值
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，屏幕的縱橫比

example:

1
2
3
4

/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ ... } }

1
2
3
4

/* for 320px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:320px){ selector{ ... } }

1
2
3
4

/* for 480 px width screen */ @media only screen (min-device-width:321px)and (max-device-width:480px){ selector{ ... } }

適用于布局的 Media Queries 這里不做詳述，可通過官方文檔進一步了解
那么對于表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？
接下來我們來了解以下的幾種針對表格響應式處理的方法：

隱藏不重要數據列

處理前

處理后

實現方法：

1
2
3
4
5
6
7
8
9
10
11
12
13

@media only screen and (max-width: 800px) { table td:nth-child(2), table th:nth-child(2) {display: none;} } @media only screen and (max-width: 640px) { table td:nth-child(4), table th:nth-child(4), table td:nth-child(7), table th:nth-child(7), table td:nth-child(8), th:nth-child(8){display: none;} }

以用戶角度思考，每個人對數據的認知不同，或許你隱藏的數據對于他卻是很重要的。所以這種方法不推薦。

多列橫向變2列縱向

處理前

處理后

實現方法：定位隱藏，變塊元素，并綁定對應列名，然后用偽元素的content:attr(data-th)實現

固定首列，剩余列橫向滾動

處理前

處理后

實現原理：

1
2

thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;}

柵格框架推薦

• Responsive Grid System
• Fluid 960 Grid
• Simple Grid

響應式圖片

帶寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的圖片還是PC上的大圖；文件體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那么我們就得把圖片也處理成響應式的根據終端類型尺寸分辨率來適配出合理的圖形。

處理原理：瀏覽器獲取用戶終端的屏幕尺寸、分辨率邏輯處理后輸出適應的圖片，如屏幕分辨率320*480，那么我們匹配給它的是寬度應小于320px的圖片。如果終端屏幕的DPI(device pixels)^DPI詳解值很高，也就是高清屏，那么我們就得輸出2倍分辨率的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的屏幕參數可通過http://screensiz.es/phone查詢。

解決方案：其實W3C已經有一個用于響應式圖形的草案：新定義標簽，因為它還只是草案，目前還沒有支持的瀏覽器，期待在不久的未來我們能用上。雖然目前不支持，但我們還是來了解下，為之后的內容做個鋪墊。

是一個圖形element，內容由多個源圖組成，并由CSS Media Queries來適配出合理圖形，代碼規范如下：

1
2
3
4
5
6
7
8
9
10
11

   
   
   
    
					

						Accessible text
					

					

source: 一個圖片源；media: 媒體查詢，用于適配屏幕尺寸；srcset: 圖片鏈接，1x適應普通屏，2x適應高清屏；