響應式網頁設計

這個話題最近很火爆，我也一直在關注，響應式網頁設計和移動網際網路密切相關，并因移動終端的豐富和普及而興盛，并且是一個頗具争議的話題，我今天将和大家探讨下。

上周寫了個簡單的ppt在組内大概介紹了下，感興趣的話可以先看下這個PPT。

在說到這個話題前，我們先看下網頁設計和前端開發的現狀：

全球有超過53億手機使用者（包括傳統手機）

國内3G使用者超過1億

iPhone4手機在2010年出貨量超過3000萬部；

iPhone 4S上市前3天賣掉400萬部；

Android手機每天激活超過50萬部；

iPad出貨量已經超過2.5億部；

預計到2015年，移動網際網路的資料流量将超越桌面端的流量。

。。。

嗯，大家也許已經開始注意到，自己和身邊的朋友也都越來越多的用上了iPhone或者android手機或平闆——一兩年前我們預料的移動網際網路時代即将來臨，現在已然實作了——我們正處在移動網際網路快速發展的時代——已經不再是起步階段了。

響應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念可以說是是為移動網際網路而生的！

或許大家之前會注意到，有很多知名網站都推出了iPhone或針對智能手機的專門網站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端觀察之前也嘗試過用wordpress插件實作m.qianduan.net的移動網站。

那麼問題就來了——我們要為每一個裝置做一個單獨的網站嗎？來讓網站在每個裝置中得到相應的視覺風格和操作體驗？

這樣勢必就要增加很多的工作量，而且很多還是重複的。

我們在做頁面的時候，一般很強調子產品化的概念，我們要求一個合格的子產品要能夠“可擴充、無侵染”，它要能夠用在任何地方都能夠正常的顯示。響應式網頁設計與此類似——網站在任何裝置中都能夠正常适配，而不用為每個裝置單獨做個子網站！

但是，産品經理和設計師可能還是會要求網站在各個浏覽器裡面表現要一模一樣，甚至要像素還原——WTF！不同的浏覽器本身的功能、行為和處理方式都不一樣，為什麼要表現完全一樣？！

let the browser flow…

其實響應式網頁的實作很簡單，都是大家熟悉的技術。

因為現在主流的智能終端都是基于iOS和Android的，而它們自帶的浏覽器都是基于webkit核心，是以我們可以完全使用viewport屬性和media query技術實作網站的響應性：

後面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味着不能進行縮放。

當然依靠螢幕寬度來進行适配是最簡單的方法，media query有很多參數可以使用比如orientation、aspect-ratio等，不太了解的可以檢視這篇詳細的介紹。

其實，media query是響應式網頁設計中被用到最多的技術。

很多項目都在使用網格技術(或者叫栅格)，前幾年960.gs很流行，但是随着螢幕分辨率的普遍提升，它已經不太适合目前需求了，于是最近幾年fluid grid開始逐漸多了起來，這種技術其實也很簡單，隻是将格栅的機關由px變成%，用百分比來控制頁面每列的寬度，進而實作寬度的自适應。

使用流體網格的網站能夠根據螢幕寬度自動調整頁面中每列的寬度，進而保證頁面的完整展現和基本功能。這也是一種不錯的方法。

flex box是css3中的新技術，它很強大，可以實作很多我們之前無法想象的自适應布局。

有時我們希望網站能夠以webapp的外觀呈現給手機使用者，flexbox是個不二的選擇。

比如，要實作這樣的簡單結構：

它很像一個app的結構，頭部和底部固定，中間高度自适應，用flexbox可以簡單實作：

HTML代碼：

雖然這裡還會有點兒問題，比如主内容區域内容太多會被隐藏掉，因為android webkit和iOS 5之前的mobile safari均不支援overflow:scroll屬性，但是這個問題還是很好解決的，比如在裡面嵌套一個子容器，用js來給定個高度并使用定位來實作滾動條進而完整展示内容，或者直接使用iscroll等js庫來實作。好消息是，iOS5中safari開始支援overflow:scroll了。

如果你關注網站性能之類的話，可能已經發現了一些問題：

加載很多不需要的資源，比如多餘的圖檔和樣式内容

帶寬限制

移動終端的記憶體和CPU限制

圖檔大小和螢幕大小不比對

嗯，任何一個方案都不是完美的，但也不會很糟糕。下面我們會提到一些可行的優化方案：

對于支援HTML5 appcache /manifest特性的浏覽器，我們可以将一些不常改動的靜态資源存儲到本地，比如css檔案，css中用到的圖檔，以及一些js檔案等：

然後将檔案儲存為manifest格式，并在HTML标簽中引入即可：

這樣，使用者在第一次通路的時候會慢一點兒，但是後續通路會很快，3G網絡中也能為使用者節省帶寬。

一種新的設計流程是，先為移動裝置設計界面，然後将PC端作為一個擴充。

這樣做的好處是顯而易見的，移動終端不會加載多餘的資源，也不會因為PC端的樣式而重繪頁面，同時也不會影響PC端的表現。

頁面中的圖檔有時會比手機/平闆的螢幕（viewport）寬，這樣會将頁面容器撐開，但是移動浏覽器又不能scroll，結果圖檔被切掉一部分，然後還會有一部分内容被隐藏掉，使用者看不到。

解決這個問題的方法很簡單，将img的最大寬度設定成100%就可以了：

嗯，這裡的前提是，沒有給img标簽設定寬度和高度，否則顯示會有問題。另外不建議直接設定width=”100%”，因為會把小圖拉大，模糊顯示。

同理，video标簽和iframe标簽的寬度也可以這樣做，而且最好不要使用iframe，寬度是個問題，性能也是一個方面吧。

這個方法有些驚豔

我們都知道可以用::before和::after僞元素+content屬性來動态顯示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支援。不過content屬性在CSS 2.1中隻能用于這兩個僞元素中，而在CSS3中，任何元素都可以使用content屬性了，這個方法就是結合css3 的attr屬性和HTML自定義屬性的功能：

然後用media query來動态指派：

當然，這種方法也有不足之處，比如PC端寬螢幕需要加載兩個圖檔檔案，然後我們也要為此準備多張圖檔檔案等。

有的網站，比如，像前端觀察這樣的技術部落格，會用pre來顯示源代碼，而浏覽器對pre标簽預設設定white-space:pre，這樣，代碼就不會換行，進而撐開子容器，造成内容被隐藏的問題：

右邊的文字被隐藏掉了。

解決方法很簡單：

當然，不隻是pre标簽，關鍵是white-space和word-break屬性的值。

嗯，主要的技術和技巧其實就這些，大家不會陌生。下面是一些比較有用的工具什麼的：

國外在響應式網頁設計上已經走的很遠了，已經有很多工具和資源供我們參考和使用：

320 and Up

Mobile Boilerplate

Golden Grid System

Gridless

Less Framework

1140 CSS Grid System

Fluid 960 Grid System

SimpleGrid

Skeleton

Respond.js，讓IE6-8支援meidia query

Responsive Design Testing 簡單而友善的測試網站的響應性的工具，輸入網址即可看到網站在不同分辨率下的表現

Resize My Browser 縮放浏覽器工具，不過不支援chrome和opera浏覽器

Media Query Bookmarklet 顧名思義，這是一個關于media query的書簽工具

ProtoFluid 線上檢視和調試網站對移動終端相容性的工具，很贊

ScreenFly 和ProtoFluid類似

responsivepx 更直覺的測試網站對不同分辨率的适配性

響應式網頁設計被提出以來，争論就不斷，其實核心問題隻有兩個個：太多的資源請求和有限的終端支援之間的沖突、響應式的網頁設計和移動終端在使用者體驗和視覺風格上的差異。前者不能容忍在弱小的手機/平闆上通過龜速的3G/2G網絡來加載一個笨重的PC端頁面，而後者糾結響應式網站不像手機網站。

我的想法是，具體問題具體分析，比如，強内容的網站，完全可以嘗試響應式網站，而重視覺和功能的網站，則可以嘗試建立一個獨立的移動網站。

另外，顯然，響應式網頁設計的大部分技術，是可以用在WebApp開發中的。

最後，歡迎各種吐槽、各種批評、各種建議、各種發散、以及各種新觀點新技術～～歡迎發表評論～～

PS：如果你手上有android/iPhone，可以直接通路下前端觀察。 :)

Responsive Web Design Techniques, Tools and Design Strategies

Responsive Web Design

The ultimate responsive web design roundup