探索移動web端開發(fā)的奧妙

如果你是剛開始接觸移動web開發(fā)的前端工程師，那你也許會遇到很多我曾經(jīng)遇到過的問題，也許有很多名詞和概念，你經(jīng)?？吹交蚵犝f，今天就讓我們來探索移動web端開發(fā)的奧妙。

首先，我們要區(qū)分三點(diǎn)概念：

移動web開發(fā)跟web前端開發(fā)差別不大，因?yàn)橹饕_發(fā)對象是IOS和Android系統(tǒng)的手持設(shè)備，所以不需要再去兼容IE和一些2B瀏覽器的兼容性，在這里是webkit的天下，可以理解成是pc網(wǎng)頁的縮小版加了一些觸摸特性，當(dāng)然不同版本的Android還有不同瀏覽器還是存在一定的差別的。看看《網(wǎng)站建設(shè)前端開發(fā)包括那些項(xiàng)目?》這篇文章或許對你有用。

web app開發(fā)特指的是用HTML5開發(fā)，因?yàn)樗芙咏蛻舳藨?yīng)用程序的用戶體驗(yàn)，可以和系統(tǒng)深度融合，調(diào)用一些只有客戶端才能調(diào)用的功能。(比如訪問電話、攝像頭等本地功能)

而native app就是特指的開發(fā)Android的Java和開發(fā)iOS的Objective-C。

綜合而言，移動web開發(fā)利用的是基于瀏覽器的網(wǎng)頁語言技術(shù)，native app開發(fā)利用的是基于操作系統(tǒng)的程序語言技術(shù)，web app介于兩者之間.當(dāng)然現(xiàn)在比較流行混合型app。

1、首先是您可能已經(jīng)聽過的響應(yīng)式布局，其實(shí)響應(yīng)式web設(shè)計(jì)并非新的技術(shù)，只是將彈性布局、彈性圖片和媒體查詢等已有的開發(fā)技巧整合在了一起，其中媒體查詢，link標(biāo)簽的media屬性到如今的css3又逐漸的更加豐富，下面列了一部分供大家參考(參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢)。已經(jīng)豐富的頁面Meta，其中定義了IOS允許全屏、頂端狀態(tài)條樣式、禁止判斷為電話號碼保存到桌面圖標(biāo)，以及允許縮放比例等豐富的屬性。另外在樣式中的應(yīng)用，我們可以基本舍棄ldpi了。

/*中分辨率屏幕*/

@media(-webkit-min-device-pixel-ratio:1){css代碼}

/*高分辨率屏幕*/

@media(-webkit-min-device-pixel-ratio:1.5){css代碼}

/*超高分辨率屏幕(傳說中的Retina屏)*/

@media(-webkit-min-device-pixel-ratio:2){css代碼}

上面就是在css中的用法，把我們需要的css代碼包含在大括號中就能用了，是不是很方便的樣子。當(dāng)然我們還可以用到幾個特性，如下：

@media screen and (max-width:768){css代碼}

針對視口寬度不大于768像素的情況加載大括號中的樣式。

2、百分百布局，當(dāng)我們拿到設(shè)計(jì)師的設(shè)計(jì)稿之后(一般為640或720)，按照設(shè)計(jì)稿的2/1或者3/1來百分比布局即可，此時便會用到css3的box-sizing等最新屬性，其中display:-webkit-box、漸變、陰影、2D3D等更是簡單粗暴，如果你沒用過，相信你會很快愛上它，甚至于ico我們也可以使用字體圖標(biāo)，因?yàn)榇蠖鄶?shù)手機(jī)瀏覽器是都支持HTML5和CSS3的。

3、字級單位，如果你還只知道用px、em那你out了，用下rem吧，我們之前用em、百分比的時候，經(jīng)常因?yàn)榍短椎膶蛹壧喽y以把控，而用px則被固定死了，現(xiàn)在我們用rem完全不用擔(dān)心這個問題，因?yàn)閞em的參照對象只有根節(jié)點(diǎn)。我們只需設(shè)置根節(jié)點(diǎn)的大小，所有子節(jié)點(diǎn)都只需參照它來設(shè)計(jì)就可以。

4、新增的標(biāo)簽和選擇符，HTML5新增標(biāo)簽讓我們的結(jié)構(gòu)更加語義化，而新的偽類選擇符和偽對象選擇符，可以讓你減少很多不必要的代碼，這里就不細(xì)說了。

5、關(guān)于PPI/DPI的了解，我們計(jì)算PPI就是為了知道一部手機(jī)設(shè)備是屬于哪個密度區(qū)間的，因?yàn)椴煌拿芏葏^(qū)間，對應(yīng)著不同的默認(rèn)縮放比例，這是一個很重要的概念。這里我們就會用到viewport。

網(wǎng)頁標(biāo)題：探索移動web端開發(fā)的奧妙
URL網(wǎng)址：http://www.bm7419.com/news42/220992.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站導(dǎo)航、云服務(wù)器、網(wǎng)站收錄、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)