如果你是剛開始接觸移動web開發的前端工程師，那你也許會遇到很多我曾經遇到過的問題，也許有很多名詞和概念，你經常看到或聽說，今天就讓我們來探索移動web端開發的奧妙。

首先，我們要區分三點概念：

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

web app開發特指的是用HTML5開發，因為他很接近客戶端應用程序的用戶體驗，可以和系統深度融合，調用一些只有客戶端才能調用的功能。(比如訪問電話、攝像頭等本地功能)

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

綜合而言，移動web開發利用的是基于瀏覽器的網頁語言技術，native app開發利用的是基于操作系統的程序語言技術，web app介于兩者之間.當然現在比較流行混合型app。

1、首先是您可能已經聽過的響應式布局，其實響應式web設計并非新的技術，只是將彈性布局、彈性圖片和媒體查詢等已有的開發技巧整合在了一起，其中媒體查詢，link標簽的media屬性到如今的css3又逐漸的更加豐富，下面列了一部分供大家參考(參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢)。已經豐富的頁面Meta，其中定義了IOS允許全屏、頂端狀態條樣式、禁止判斷為電話號碼保存到桌面圖標，以及允許縮放比例等豐富的屬性。另外在樣式中的應用，我們可以基本舍棄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代碼包含在大括號中就能用了，是不是很方便的樣子。當然我們還可以用到幾個特性，如下：

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

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

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

3、字級單位，如果你還只知道用px、em那你out了，用下rem吧，我們之前用em、百分比的時候，經常因為嵌套的層級太多而難以把控，而用px則被固定死了，現在我們用rem完全不用擔心這個問題，因為rem的參照對象只有根節點。我們只需設置根節點的大小，所有子節點都只需參照它來設計就可以。

4、新增的標簽和選擇符，HTML5新增標簽讓我們的結構更加語義化，而新的偽類選擇符和偽對象選擇符，可以讓你減少很多不必要的代碼，這里就不細說了。

5、關于PPI/DPI的了解，我們計算PPI就是為了知道一部手機設備是屬于哪個密度區間的，因為不同的密度區間，對應著不同的默認縮放比例，這是一個很重要的概念。這里我們就會用到viewport。

文章名稱：探索移動web端開發的奧妙
分享路徑：http://m.2m8n56k.cn/news/220992.html

成都網站建設公司_創新互聯，為您提供網站設計公司、全網營銷推廣、App開發、電子商務、軟件開發、網站制作

廣告

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