從0開(kāi)發(fā)移動(dòng)端界面
互聯(lián)網(wǎng)的發(fā)展,科技越來(lái)越發(fā)達(dá),人與人之前溝通的距離越來(lái)越近,隨著電子設(shè)備的發(fā)展,我們可以上網(wǎng)的工具越來(lái)越多,手機(jī)這幾年發(fā)展日新月異,手機(jī)移動(dòng)端-網(wǎng)頁(yè)也迎來(lái)了爆發(fā)期。
手機(jī)品牌介紹(不同手機(jī),不同尺寸)
手機(jī)瀏覽器品牌
規(guī)劃移動(dòng)端開(kāi)發(fā)
移動(dòng)端插件推薦
一睛挚、手機(jī)品牌介紹
近年來(lái)手機(jī)可以分為2部分,2010年以前的功能機(jī)為主,摩托羅拉(Motorola)则酝、諾基亞(Nokia)、西門子(Siemens)闰集、愛(ài)立信(索愛(ài)(Sony Ericsson))沽讹、RIM(黑莓)般卑、多普達(dá)、飛利浦爽雄、夏普蝠检、松下、索尼挚瘟、三星(Samsung)叹谁、 LG等; 2010年以后就是智能機(jī)的潮流,截至現(xiàn)在存活下來(lái)的國(guó)內(nèi)大品牌有 華為、蘋果乘盖、OPPO焰檩、vivo、小米订框、三星等锅尘,手機(jī)尺寸從 3.0- 4.5- 5.0- 5.1 -5.5- 5.6 -6.0以及到ipad等規(guī)格,帶來(lái)更好的瀏覽效果布蔗。
二藤违、手機(jī)瀏覽器品牌介紹
瀏覽器從電腦版延伸到手機(jī)版,手機(jī)國(guó)內(nèi)主流瀏覽器有 安卓自帶瀏覽器纵揍、chrome顿乒、uc瀏覽器、百度瀏覽器泽谨、QQ瀏覽器璧榄、360瀏覽器等safari等,
四大瀏覽器內(nèi)核
1.Trident (IE瀏覽器) :因?yàn)樵谠缙贗E占有大量的市場(chǎng)份額吧雹,所以以前有很多網(wǎng)頁(yè)是根據(jù)這個(gè)Trident的標(biāo)準(zhǔn)來(lái)編寫的骨杂,但是實(shí)際上這個(gè)內(nèi)核對(duì)真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)支持不是很好,同時(shí)存在許多安全Bug雄卷。
2.Gecko:( FireFox )優(yōu)點(diǎn)就是功能強(qiáng)大搓蚪、豐富,可以支持很多復(fù)雜網(wǎng)頁(yè)效果和瀏覽器擴(kuò)展接口丁鹉,缺點(diǎn)是消耗很多的資源妒潭,比如內(nèi)存。
3.Webkit: ( Chrome/ Safari / UC )優(yōu)點(diǎn)就是Webkit擁有清晰的源碼結(jié)構(gòu)揣钦、極快的渲染速度雳灾,缺點(diǎn)是對(duì)網(wǎng)頁(yè)代碼的兼容性較低,會(huì)使一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁(yè)無(wú)法正確顯示冯凹。
4.Presto: ( 歐朋 ) Presto內(nèi)核被稱為公認(rèn)的瀏覽網(wǎng)頁(yè)速度最快的內(nèi)核谎亩,同時(shí)也是處理JS腳本最兼容的內(nèi)核,能在Windows、Mac及Linux操作系統(tǒng)下完美運(yùn)行匈庭。
移動(dòng)端開(kāi)發(fā)主要對(duì)象是手持設(shè)備夫凸,其中80%以上是IOS和Android系統(tǒng),都是基于Webkit內(nèi)核的瀏覽器.
三嚎花、規(guī)劃移動(dòng)端開(kāi)發(fā)
面對(duì)不同尺寸的手機(jī),需要對(duì)不同尺寸的手機(jī)進(jìn)行適配,制定一些規(guī)范還是必要的呀洲。以下是我整理的一些規(guī)范和約定紊选。
1、對(duì)不同的手機(jī)瀏覽器進(jìn)行樣式重置道逗,盡量保證不同品牌的瀏覽器顯示一致. 推薦使用 Normailze或自己定制手機(jī)端重置樣式
2兵罢、對(duì)不同的手機(jī)尺寸進(jìn)行適配,保證手機(jī)端顯示一致 推薦使用 flexible阿里手淘團(tuán)隊(duì)出的框架滓窍,通過(guò)rem適應(yīng)手機(jī)移動(dòng)端產(chǎn)品或者使用其他集成框架 Framework7,MUI,amazeui等優(yōu)秀的手機(jī)框架.
3卖词、對(duì)項(xiàng)目整體結(jié)構(gòu)進(jìn)行整理,提出公用的部分可復(fù)用的代碼吏夯,提高效率此蜈。
4、明白項(xiàng)目的需求噪生,了解要兼容的瀏覽器, 盡可能少使用css3優(yōu)秀的樣式和html5元素,做好兼容性裆赵。
5、對(duì)于個(gè)別框架無(wú)法實(shí)現(xiàn)的需求跺嗽,在需要引入其他框架的時(shí)候, 在需要的時(shí)候引入文件战授,做到不浪費(fèi)資源
6、文件目錄盡量清晰桨嫁,代碼多加注釋植兰,方便維護(hù)
四、移動(dòng)端插件推薦
移動(dòng)框架 zepto 優(yōu)秀的移動(dòng)端框架,比jquery更好的兼容性
移動(dòng)框架 jquery 一個(gè)快速璃吧、簡(jiǎn)潔的JavaScript框架,Js開(kāi)發(fā)最喜愛(ài)的框架
圖片輪播 swiper一款免費(fèi)以及輕量級(jí)的移動(dòng)設(shè)備觸控滑塊的js框架 很好很強(qiáng)大
導(dǎo)航滾動(dòng) iScroll.js 一個(gè)高性能楣导、輕量級(jí)、免費(fèi),跨平臺(tái)的javascript庫(kù)畜挨,有很強(qiáng)大的滾動(dòng)功能
樣式重置 Normailze 開(kāi)源的樣式重置框架
移動(dòng)端彈窗 layuiMobile 為移動(dòng)設(shè)備(手機(jī)爷辙、平板等webkit內(nèi)核瀏覽器/webview)量身定做的彈層UI,提供了很好的提示窗口體驗(yàn)
移動(dòng)端自適應(yīng)框架 flexible 阿里手淘團(tuán)隊(duì)出的框架