這個話題最近很火爆，我也一直在關注，回應式 網頁設計 和手機行動網路密切相關，並因行動終端的豐富和普及而興盛，並且是一個頗具爭議的話題，我今天將和大家探討下。
在說到這個話題前，我們先看下網頁設計和前端開發的現狀：
1.全球有超過53億手機用戶（包括傳統手機）
2.國內3G用戶超過1億
3.iPhone4手機在2010年出貨量超過3000萬部；
4.iPhone 4S上市前3天賣掉400萬部；
5.Android手機每天啟動超過50萬部；
6.iPad出貨量已經超過2.5億部；
7.預計到2015年，手機行動網路的資料流程量將超越桌面端的流量。
嗯，大家也許已經開始注意到，自己和身邊的朋友也都越來越多的用上了iPhone或者android手機或平板——一兩年前我們預料的手機行動網路時代即將來臨，現在已然實現了——我們正處在手機行動網路快速發展的時代——已經不再是起步階段了。
那麼，什麼是回應式網頁設計？
回應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個瀏覽端——而不是為每個瀏覽端做一個特定的版本。這個概念可以說是是為手機行動網路而生的！
或許大家之前會注意到，有很多知名網站都推出了iPhone或針對智慧手機的專門網站，比如3g.qq.com、m.taobao.com、 ipad.xxx.com等等。。。甚至前端觀察之前也嘗試過用wordpress插件實現m.qianduan.net的移動網站。
那麼問題就來了——我們要為每一個設備做一個單獨的網站嗎？來讓網站在每個設備中得到相應的視覺風格和操作體驗？
這樣勢必就要增加很多的工作量，而且很多還是重複的。
我們在做頁面的時候，一般很強調模組化的概念，我們要求一個合格的模組要能夠“可擴展、無侵染”，它要能夠用在任何地方都能夠正常的顯示。回應式網頁設計與此類似——網站在任何設備中都能夠正常適配，而不用為每個設備單獨做個子網站！
但是，產品經理和設計師可能還是會要求網站在各個流覽器裏面表現要一模一樣，甚至要圖元還原——WTF！不同的流覽器本身的功能、行為和處理方式都不一樣，為什麼要表現完全一樣？！
怎麼做？
其實回應式網頁的實現很簡單，都是大家熟悉的技術。
media query(媒體查詢)
因為現在主流的智慧型終端都是基於iOS和Android的，而它們自帶的流覽器都是基於webkit內核，所以我們可以完全使用viewport屬性和media query技術實現網站的回應性：
後面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味著不能進行縮放。(下例表示)
< meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
當然依靠螢幕寬度來進行適配是最簡單的方法，media query有很多參數可以使用比如orientation、aspect-ratio等。(下例表示)
/* for 240 px width screen */
@media only screen and (max-device-width:240px){selector{}}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){selector{}}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){selector{}}
fluid grid(活動網格)
很多專案都在使用網格技術(或者叫欄格)，前幾年960.gs很流行，但是隨著螢幕解析度的普遍提升，它已經不太適合當前需求了，於是最近幾年 fluid grid開始逐漸多了起來，這種技術其實也很簡單，只是將表格的單位由px變成%，用百分比來控制頁面每列的寬度，從而實現寬度的自適應。
使用活動網格的網站能夠根據螢幕寬度自動調整頁面中每列的寬度，從而保證頁面的完整展現和基本功能。這也是一種不錯的方法。
不足之處
如果你關注網站性能之類的話，可能已經發現了一些問題：
•載入很多不需要的資源，比如多餘的圖片和樣式內容
•帶寬限制
•移動終端的記憶體和CPU限制
•圖片大小和螢幕大小不匹配
嗯，任何一個方案都不是完美的，但也不會很糟糕。
爭論和總結
回應式網頁設計被提出以來，爭論就不斷，其實核心問題只有兩個個：太多的資源請求和有限的終端支援之間的矛盾、回應式的網頁設計和移動終端在用戶體 驗和視覺風格上的差異。前者不能容忍在弱小的手機/平板上通過龜速的3G/2G網路來載入一個笨重的PC端頁面，而後者糾結響應式網站不像手機網站。
我的想法是，具體問題具體分析，比如，強內容的網站，完全可以嘗試回應式網站，而重視覺和功能的網站，則可以嘗試建立一個獨立的移動網站。
另外，顯然，回應式網頁設計的大部分技術，是可以用在WebApp開發中的。
最後，歡迎各種吐槽、各種批評、各種建議、各種發散、以及各種新觀點新技術～～歡迎發表評論～～
轉貼來源：前端觀察 - 前端觀察專注於網站前端設計與前端開發
http://www.piece2ec.com.tw/news.asp?ID=1023
參考文獻：
1.李俊宏（1995）。網頁設計原則的研究一以大專院校首頁設計為例。雲林技術學院 程式設計 研究所碩士論文，未出版，雲林。
2.王育民、王怡舜 (1999), 行銷策略導向之旅館業網際網路服務內容規劃與設計, 第五屆服務管理研討會, 台北市, .
3.林隆儀、林岳民 (2005), 廣告比較策略與廣告訴求方式對購買意願的影響-產品涉入之干擾效果, 企業管理學報, 65(), 1-30.
留言列表
