2022-12-09 分類: 網站建設
如果你是剛開始接觸移動web開發(fā)的前端工程師,那你也許會遇到很多我曾經遇到過的問題,也許有很多名詞和概念,你經??吹交蚵犝f,今天就讓我們來探索移動web端開發(fā)的奧妙。
首先,我們要區(qū)分三點概念:
移動web開發(fā)跟web前端開發(fā)差別不大,因為主要開發(fā)對象是IOS和Android系統(tǒng)的手持設備,所以不需要再去兼容IE和一些2B瀏覽器的兼容性,在這里是webkit的天下,可以理解成是pc網頁的縮小版加了一些觸摸特性,當然不同版本的Android還有不同瀏覽器還是存在一定的差別的??纯础?a >網站建設前端開發(fā)包括那些項目?》這篇文章或許對你有用。
web app開發(fā)特指的是用HTML5開發(fā),因為他很接近客戶端應用程序的用戶體驗,可以和系統(tǒng)深度融合,調用一些只有客戶端才能調用的功能。(比如訪問電話、攝像頭等本地功能)
而native app就是特指的開發(fā)Android的Java和開發(fā)iOS的Objective-C。
綜合而言,移動web開發(fā)利用的是基于瀏覽器的網頁語言技術,native app開發(fā)利用的是基于操作系統(tǒng)的程序語言技術,web app介于兩者之間.當然現在比較流行混合型app。
1、首先是您可能已經聽過的響應式布局,其實響應式web設計并非新的技術,只是將彈性布局、彈性圖片和媒體查詢等已有的開發(fā)技巧整合在了一起,其中媒體查詢,link標簽的media屬性到如今的css3又逐漸的更加豐富,下面列了一部分供大家參考(參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢)。已經豐富的頁面Meta,其中定義了IOS允許全屏、頂端狀態(tài)條樣式、禁止判斷為電話號碼保存到桌面圖標,以及允許縮放比例等豐富的屬性。另外在樣式中的應用,我們可以基本舍棄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的參照對象只有根節(jié)點。我們只需設置根節(jié)點的大小,所有子節(jié)點都只需參照它來設計就可以。
4、新增的標簽和選擇符,HTML5新增標簽讓我們的結構更加語義化,而新的偽類選擇符和偽對象選擇符,可以讓你減少很多不必要的代碼,這里就不細說了。
5、關于PPI/DPI的了解,我們計算PPI就是為了知道一部手機設備是屬于哪個密度區(qū)間的,因為不同的密度區(qū)間,對應著不同的默認縮放比例,這是一個很重要的概念。這里我們就會用到viewport。
網頁標題:探索移動web端開發(fā)的奧妙
URL網址:http://redsoil1982.com.cn/news42/220992.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供品牌網站建設、定制網站、網站導航、云服務器、網站收錄、營銷型網站建設
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容