這篇文章就當進入移動web開發的宣誓稿吧，作為移動領域的門外漢，在這段時間的接觸后，發現前端開發這潭水愈發的深了！不多言，進入主題。
我將從下面幾個方面探討移動web前端開發：分辨率、屏幕、手機瀏覽器、設計理念、響應式web開發。
分辨率
手機分辨率比PC分辨率要龐雜得多，各種分辨率有木有？大小差距那么大有木有？這在一定程度上給頁面制作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。我從兩個方面進行思考：
1) 市場上主流手機生產商的產品分辨率。經過調研發現，目前主流的手機分辨率為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統計，要有精確的數據需要花費不少的精力，那是數據分析人員的工作。
2) 項目目標群所持設備的分辨率。項目目標群即用戶，用戶擁有什么樣的手機分辨率，從一定程度上來說比第一點來得更加重要，它決定着項目開發的方向。
屏幕
目前市場上的手機屏幕分為普通屏幕和視網膜屏幕兩種。視網膜屏幕與普通屏幕最大的區別在於它的顯示性能更優秀、圖像更細膩。蘋果公司從iphone4和new pad開始采用視網膜屏幕。
視網膜屏幕的評定指標是以像素密度超過300ppi為准。以iphone4為例，像素密度的計算方式如下：
1) 分辨率640:960 = 2:3
2) 勾股定理取對角線值，根號22+32 = 3.6
3) 像素密度 (960*3.6)/(3.5*3) = 326，其中3.5是屏幕尺寸，3是對應於960的最終值。計算過程中有誤差，不必太在意。
視網膜屏幕的出現又帶來了一個新的概念：“設備像素”。設備像素是要跟css像素做區分的。有關這方面的研究，您可以參考張鑫旭的這篇文章《視網膜New iPad與普通分辨率iPad頁面的兼容處理》。里面的闡述很細致，我從中受益匪淺。
手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端，競爭也越來越激烈。目前國內市場主流的手機瀏覽器有：UC、百度、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基於webkit內核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術吧。
設計理念（3S原則）
3S原則是指：Simple、Small、Speedy。這是國外一位大牛總結的，可以參見《Mobile Web Design: Best Practices》。對這三點，我深表認同。想說的是Speedy嚴格意義上應該算是結果，而不能歸為原則。Web設計方面，我一直崇尚簡約風格：便捷的操作、清爽的界面、友好的提示、少而小的圖片、精簡的代碼等，當做到了這些，相信網站會變得Speedy。
移動web開發應該把手機的固有特性優先考慮。首先，手機屏幕相比桌面屏幕很小，所以滿屏可顯示的內容不多，這就要求我們在頁面設計的時候選擇好適當的字號，還得考慮文檔內容的優先次序，把重要內容靠前顯示；其次，手機的交互方式讓我們得去重新考慮頁面元素的設計。桌面web以鼠標操作為主，這樣可操作的范圍很精確，移動web以觸控操作為主，手指的操作范圍比較寬泛，反映在頁面上，我以按鈕為例，對於小屏幕低分辨率的手機來說，可以把按鈕設置為.button{display:block;}，而對於大屏幕高分辨率的手機，可以設置為.button{display:inline-block;}，這是按鈕。對於鏈接列表，要設置適當的行高，避免可點擊的范圍太小而操作失誤；最后，圖片。手機開發應盡量避免圖片的使用，像圓角、陰影、漸變等以前在桌面不好實現的情況，在手機開發上已經不存在了，完全可以采用css3來實現，所以設計師在設計psd效果圖的時候，就把效果做出來，但切圖的時候就不必給出。
我覺得，所有的設計理念都是為了提升用戶體驗而提出的，當我們的目標群確定下來之后，如何提升用戶體驗，便是我們設計的出發點。
響應式web開發
這不是一項開創性的技術變革，但當我了解它之后還是覺得伊森·馬科特很了不起。簡單地說，響應式web設計采用了媒體查詢、流式布局、液態圖片三項技術，把它們組合在一起來制作頁面，使得頁面不只在傳統桌面，在平板電腦和手機上，各種不同的分辨率都能夠完美顯示。而要做到這點，我覺得不難，請繼續往下：
1) 准備工作：
a) 插件安裝：window resize。您可以通過以下鏈接https://chrome.google.com/webstore/search-extensions/window%20resize下載安裝，安裝成功后，當您調整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似於手機視口的大小提示。截圖如下：
b) 編輯器安裝：subline Text2（支持html5，安裝css3擴展失敗）、topStyle5（支持css3）。
c) 弄清視口和屏幕的區別。視口是瀏覽器的內容顯示區域，屏幕是設備的物理顯示區域。比如視口寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集：http://mediaqueri.es。這里有很多響應式Web設計的網站，供您參考和學習。
2) 征途ING：
e) 響應式web設計之媒體查詢：
為了減少http請求，我想在css樣式表里進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行加載。樣式表里的媒體查詢格式為：
@media screen and (max-width:960px){}
大括號內部書寫樣式。該語句相當於判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調用大括號內的樣式。
f) 響應式web設計之流式布局：
流式布局以百分比進行布局。最重要是時刻關注元素的父級層，所有的元素都是以父級層為基准。流式布局的應用是為了和媒體查詢完美地結合，形成平滑的布局變化跳轉效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片：
要實現液態圖片，只需加入如下代碼：img{max-width:100%;}
響應式web開發並不會很難，只是以前一個頁面只需要美工給出一張效果圖，現在要給出兩張以上，這樣一來，工作量相應地增加了許多。建議大家先有流式布局的思想，減少層級的嵌套。我會在文章末尾貼上自己做的一個測試頁面，大家可以看看，頁面來源於http://2011.dconstruct.org/，由於時間原因，一些細節沒法處理得很到位，同時對於低版本的瀏覽器的處理沒考慮進去。僅供參考吧。文章理論偏多，沒辦法，經常寫着寫着就往理論上偏，海涵。多謝閱讀！
測試頁面：rwd