本系列將會用vue.js2制作一個移動端的webapp單頁面,頁面不多,大概在7,8個左右,不過麻雀雖小,五臟俱全,常用的效果如輪播圖,下拉刷新,上拉加載,圖片懶加載都會用到。css方面也會有一些描述,像不同分辨率的適配,flex布局以及scss來編寫mixin來處理2x,3x圖等。
移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

初始工作:

通過vue-cli安裝webpack模板后,會自動生成一大堆文件,通常我們只關(guān)心src/目錄下的東西。
個人習(xí)慣在src下新建一個base目錄,用來存放通用的css及js,比如樣式重置css,一切js工具函數(shù)。

下載好文件后,npm run dev
啟動服務(wù)你就會看到熟悉的hello vue。由于我們做的是移動端的頁面,所以把chrome切換到手機(jī)模式(打開開發(fā)工具,ctrl+shift+m或者點(diǎn)左上角那個手機(jī))

對于移動端如何適配不同的手機(jī)屏幕,估計(jì)每個人都有自己的做法,我用的是淘寶的flexible.js,根據(jù)不同類型來縮放以及調(diào)整html字體的大小,用rem來布局。使用的方法也很簡單,只需要引入Js文件就可以了,github地址。

這里簡單介紹一下如何計(jì)算rem:假如設(shè)計(jì)稿為640,有一個div寬200px,則css應(yīng)該為width:(200/640)*10=3.125rem假如設(shè)計(jì)稿為750,有一個div寬200px,則css應(yīng)該為width:(200/750)*10=2.666rem

可以發(fā)現(xiàn)如果每次量好一個DIV寬后都要用一個計(jì)算器算一遍,那這速度也太慢了。
假如你用的是scss,那么可以編寫一個函數(shù)來處理(函數(shù)下面的75px來自設(shè)計(jì)稿大小,假如設(shè)計(jì)稿為750,則為75;)

        		

網(wǎng)友評論