本系列將會(huì)用vue.js2制作一個(gè)移動(dòng)端的webapp單頁(yè)面，頁(yè)面不多，大概在7,8個(gè)左右，不過(guò)麻雀雖小，五臟俱全，常用的效果如輪播圖，下拉刷新，上拉加載，圖片懶加載都會(huì)用到。css方面也會(huì)有一些描述，像不同分辨率的適配，flex布局以及scss來(lái)編寫(xiě)mixin來(lái)處理2x,3x圖等。
初始工作：
通過(guò)vue-cli安裝webpack模板后，會(huì)自動(dòng)生成一大堆文件，通常我們只關(guān)心src/目錄下的東西。
個(gè)人習(xí)慣在src下新建一個(gè)base目錄，用來(lái)存放通用的css及js，比如樣式重置css，一切js工具函數(shù)。
下載好文件后，npm run dev
啟動(dòng)服務(wù)你就會(huì)看到熟悉的hello vue。由于我們做的是移動(dòng)端的頁(yè)面，所以把chrome切換到手機(jī)模式（打開(kāi)開(kāi)發(fā)工具，ctrl+shift+m或者點(diǎn)左上角那個(gè)手機(jī)）
對(duì)于移動(dòng)端如何適配不同的手機(jī)屏幕，估計(jì)每個(gè)人都有自己的做法，我用的是淘寶的flexible.js，根據(jù)不同類(lèi)型來(lái)縮放以及調(diào)整html字體的大小，用rem來(lái)布局。使用的方法也很簡(jiǎn)單，只需要引入Js文件就可以了，github地址。
這里簡(jiǎn)單介紹一下如何計(jì)算rem:假如設(shè)計(jì)稿為640,有一個(gè)div寬200px，則css應(yīng)該為width:(200/640)*10=3.125rem假如設(shè)計(jì)稿為750,有一個(gè)div寬200px，則css應(yīng)該為width:(200/750)*10=2.666rem
可以發(fā)現(xiàn)如果每次量好一個(gè)DIV寬后都要用一個(gè)計(jì)算器算一遍，那這速度也太慢了。
假如你用的是scss，那么可以編寫(xiě)一個(gè)函數(shù)來(lái)處理(函數(shù)下面的75px來(lái)自設(shè)計(jì)稿大小，假如設(shè)計(jì)稿為750，則為75；)
網(wǎng)友評(píng)論
