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