本系列將會用vue.js2制作一個移動端的webapp單頁面，頁面不多，大概在7,8個左右，不過麻雀雖小，五臟俱全，常用的效果如輪播圖，下拉刷新，上拉加載，圖片懶加載都會用到。css方面也會有一些描述，像不同分辨率的適配，flex布局以及scss來編寫mixin來處理2x,3x圖等。
初始工作：
通過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)友評論
