本系列將會用vue.js2制作一個(gè)移動端的webapp單頁面，頁面不多，大概在7,8個(gè)左右，不過麻雀雖小，五臟俱全，常用的效果如輪播圖，下拉刷新，上拉加載，圖片懶加載都會用到。css方面也會有一些描述，像不同分辨率的適配，flex布局以及scss來編寫mixin來處理2x,3x圖等。
初始工作：
通過vue-cli安裝webpack模板后，會自動生成一大堆文件，通常我們只關(guān)心src/目錄下的東西。
個(gè)人習(xí)慣在src下新建一個(gè)base目錄，用來存放通用的css及js，比如樣式重置css，一切js工具函數(shù)。
下載好文件后，npm run dev
啟動服務(wù)你就會看到熟悉的hello vue。由于我們做的是移動端的頁面，所以把chrome切換到手機(jī)模式（打開開發(fā)工具，ctrl+shift+m或者點(diǎn)左上角那個(gè)手機(jī)）
對于移動端如何適配不同的手機(jī)屏幕，估計(jì)每個(gè)人都有自己的做法，我用的是淘寶的flexible.js，根據(jù)不同類型來縮放以及調(diào)整html字體的大小，用rem來布局。使用的方法也很簡單，只需要引入Js文件就可以了，github地址。
這里簡單介紹一下如何計(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，那么可以編寫一個(gè)函數(shù)來處理(函數(shù)下面的75px來自設(shè)計(jì)稿大小，假如設(shè)計(jì)稿為750，則為75；)
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式