前言

這篇文章就當進入移動web開發(fā)的宣誓稿吧，作為移動領(lǐng)域的門外漢，在這段時間的接觸后，發(fā)現(xiàn)前端開發(fā)這潭水愈發(fā)的深了！不多言，進入主題。

我將從下面幾個方面探討移動web前端開發(fā)：分辨率、屏幕、手機瀏覽器、設計理念、響應式web開發(fā)。

分辨率

手機分辨率比PC分辨率要龐雜得多，各種分辨率有木有？大小差距那么大有木有？這在一定程度上給頁面制作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。我從兩個方面進行思考：

1)市場上主流手機生產(chǎn)商的產(chǎn)品分辨率。經(jīng)過調(diào)研發(fā)現(xiàn)，目前主流的手機分辨率為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統(tǒng)計，要有精確的數(shù)據(jù)需要花費不少的精力，那是數(shù)據(jù)分析人員的工作。

2)項目目標群所持設備的分辨率。項目目標群即用戶，用戶擁有什么樣的手機分辨率，從一定程度上來說比第一點來得更加重要，它決定著項目開發(fā)的方向。

屏幕

目前市場上的手機屏幕分為普通屏幕和視網(wǎng)膜屏幕兩種。視網(wǎng)膜屏幕與普通屏幕最大的區(qū)別在于它的顯示性能更優(yōu)秀、圖像更細膩。蘋果公司從iphone4和newpad開始采用視網(wǎng)膜屏幕。

視網(wǎng)膜屏幕的評定指標是以像素密度超過300ppi為準。以iphone4為例，像素密度的計算方式如下：

1)分辨率640:960=2:3

2)勾股定理取對角線值，根號22+32=3.6

3)像素密度(960*3.6)/(3.5*3)=326，其中3.5是屏幕尺寸，3是對應于960的最終值。計算過程中有誤差，不必太在意。

視網(wǎng)膜屏幕的出現(xiàn)又帶來了一個新的概念：“設備像素”。設備像素是要跟css像素做區(qū)分的。有關(guān)這方面的研究，您可以參考張鑫旭的這篇文章《視網(wǎng)膜New iPad與普通分辨率iPad頁面的兼容處理》。里面的闡述很細致，我從中受益匪淺。

手機瀏覽器

瀏覽器已經(jīng)逐漸從傳統(tǒng)桌面轉(zhuǎn)向手機端，競爭也越來越激烈。目前國內(nèi)市場主流的手機瀏覽器有：UC、百度、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基于webkit內(nèi)核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術(shù)吧。

設計理念（3S原則）

3S原則是指：Simple、Small、Speedy。這是國外一位大牛總結(jié)的，可以參見《Mobile Web Design: Best Practices》。對這三點，我深表認同。想說的是Speedy嚴格意義上應該算是結(jié)果，而不能歸為原則。Web設計方面，我一直崇尚簡約風格：便捷的操作、清爽的界面、友好的提示、少而小的圖片、精簡的代碼等，當做到了這些，相信網(wǎng)站會變得Speedy。

移動web開發(fā)應該把手機的固有特性優(yōu)先考慮。首先，手機屏幕相比桌面屏幕很小，所以滿屏可顯示的內(nèi)容不多，這就要求我們在頁面設計的時候選擇好適當?shù)淖痔枺€得考慮文檔內(nèi)容的優(yōu)先次序，把重要內(nèi)容靠前顯示；其次，手機的交互方式讓我們得去重新考慮頁面元素的設計。桌面web以鼠標操作為主，這樣可操作的范圍很精確，移動web以觸控操作為主，手指的操作范圍比較寬泛，反映在頁面上，我以按鈕為例，對于小屏幕低分辨率的手機來說，可以把按鈕設置為.button{display:block;}，而對于大屏幕高分辨率的手機，可以設置為.button{display:inline-block;}，這是按鈕。對于鏈接列表，要設置適當?shù)男懈撸苊饪牲c擊的范圍太小而操作失誤；最后，圖片。手機開發(fā)應盡量避免圖片的使用，像圓角、陰影、漸變等以前在桌面不好實現(xiàn)的情況，在手機開發(fā)上已經(jīng)不存在了，完全可以采用css3來實現(xiàn)，所以設計師在設計psd效果圖的時候，就把效果做出來，但切圖的時候就不必給出。

我覺得，所有的設計理念都是為了提升用戶體驗而提出的，當我們的目標群確定下來之后，如何提升用戶體驗，便是我們設計的出發(fā)點。

響應式web開發(fā)

這不是一項開創(chuàng)性的技術(shù)變革，但當我了解它之后還是覺得伊森·馬科特很了不起。簡單地說，響應式web設計采用了媒體查詢、流式布局、液態(tài)圖片三項技術(shù)，把它們組合在一起來制作頁面，使得頁面不只在傳統(tǒng)桌面，在平板電腦和手機上，各種不同的分辨率都能夠完美顯示。而要做到這點，我覺得不難，請繼續(xù)往下：

1)準備工作：

a)插件安裝：windowresize。您可以通過以下鏈接https://chrome.google.com/webstore/search-extensions/window%20resize下載安裝，安裝成功后，當您調(diào)整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似于手機視口的大小提示。截圖如下：

b)編輯器安裝：sublineText2（支持html5，安裝css3擴展失敗）、topStyle5（支持css3）。

c)弄清視口和屏幕的區(qū)別。視口是瀏覽器的內(nèi)容顯示區(qū)域，屏幕是設備的物理顯示區(qū)域。比如視口寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經(jīng)常見過這段代碼：

<metaname=”viewport”content=”width=device-width,initial-scale=1.0”>

其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。

d)響應式設計創(chuàng)意網(wǎng)站收集：

2)征途ING：

e)響應式web設計之媒體查詢：

為了減少http請求，我想在css樣式表里進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行加載。樣式表里的媒體查詢格式為：

@mediascreenand(max-width:960px){}

大括號內(nèi)部書寫樣式。該語句相當于判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調(diào)用大括號內(nèi)的樣式。

f)響應式web設計之流式布局：

流式布局以百分比進行布局。最重要是時刻關(guān)注元素的父級層，所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結(jié)合，形成平滑的布局變化跳轉(zhuǎn)效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。

g)響應式web設計之液態(tài)圖片：

要實現(xiàn)液態(tài)圖片，只需加入如下代碼：img{max-width:100%;}

響應式web開發(fā)并不會很難，只是以前一個頁面只需要美工給出一張效果圖，現(xiàn)在要給出兩張以上，這樣一來，工作量相應地增加了許多。建議大家先有流式布局的思想，減少層級的嵌套。我會在文章末尾貼上自己做的一個測試頁面，大家可以看看，頁面來源于

測試頁面：rwd