前言

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

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

分辨率

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

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

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

屏幕

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

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

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

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

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

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

手機(jī)瀏覽器

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

設(shè)計(jì)理念（3S原則）

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

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

我覺得，所有的設(shè)計(jì)理念都是為了提升用戶體驗(yàn)而提出的，當(dāng)我們的目標(biāo)群確定下來之后，如何提升用戶體驗(yàn)，便是我們設(shè)計(jì)的出發(fā)點(diǎn)。

響應(yīng)式web開發(fā)

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

1)準(zhǔn)備工作：

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

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

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

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

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

d)響應(yīng)式設(shè)計(jì)創(chuàng)意網(wǎng)站收集：

2)征途ING：

e)響應(yīng)式web設(shè)計(jì)之媒體查詢：

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

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

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

f)響應(yīng)式web設(shè)計(jì)之流式布局：

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

g)響應(yīng)式web設(shè)計(jì)之液態(tài)圖片：

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

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

測試頁面：rwd