13996527831
詳細

探索移動web端開發的奧妙

發表日期:2015-03-05 16:59:55   作者來源:米卓網絡   瀏覽:    

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

极速排列3