如果和還不了解移動web布局方案,可以先看看這篇文章 【移動web適配方案】
這篇文章涉及的代碼
關(guān)于lib-flexible可伸縮布局方案
flexible方案是手淘經(jīng)過多年的摸索和實(shí)戰(zhàn)，總結(jié)出的一套移動端適配方案。早期的flexible的方案（lib-flexible）通過動態(tài)修改viewport的方式來設(shè)置視口，出現(xiàn)了很多問題：安卓端1像素問題 、不能與響應(yīng)式兼容 等等。最新版(amfe-lexible)已經(jīng)不再修改 viewport ，而是統(tǒng)一使用理想視口。
1.Vue 2.x + lib-flexible方式
這是一種過時的方案，這里就略過
2.Vue 2.x + amfe-flexible方式
(1)安裝amfe-flexible
$ npm install amfe-flexible --save
(2)在main.js中引入amfe-flexible
import 'amfe-flexible'
(3)viewport設(shè)置理想視口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
(4)按照視覺稿布局（以750px為例）
把視覺稿分成100份來看待（為了以后兼容vh，vw單位）。每一份被稱為一個單位a。同時，1rem單位認(rèn)定為10a。拿750的視覺稿舉例：
1a = 7.5px
1rem = 75px
因此，對于視覺稿上的元素的尺寸換算，只需要 原始px值除以rem基準(zhǔn)px 值即可。注意 字體不使用rem單位
在實(shí)際生產(chǎn)當(dāng)中，如果每一次計算px轉(zhuǎn)換rem都會影響開發(fā)效率
目前主要有兩種方式來解決這個問題
（a）CSSREM是一個CSS的px值轉(zhuǎn)rem值的Sublime Text3自動完成插件。
（b）除了使用編輯器的插件之外，還可以使用CSS的處理器來幫助大家處理。比如說Sass、LESS以及PostCSS這樣的處理器。
這里主要講下使用PostCSS方式解決這個問題，這也是我常用的方式
如何在vue-cli中使用PostCSS方式解決這個問題?
這里介紹三款將px轉(zhuǎn)換為rem插件
postcss-plugin-px2rem官方文檔：https://www.npmjs.com/package/postcss-plugin-px2rem
postcss-pxtorem官方文檔：https://www.npmjs.com/package/postcss-pxtorem
postcss-px2rem官方文檔：https://www.npmjs.com/package/postcss-px2rem
這三種插件postcss-pxtorem和 postcss-px2rem 類似，postcss-plugin-px2rem 這個插件 配置選項(xiàng)上有 exclude 屬性，它可以配置 是否對 某個文件夾下的所有css文件不進(jìn)行從px到rem的轉(zhuǎn)換。我們可以利用這個特性，排除掉我們不要轉(zhuǎn)換處理的文件夾。
在vue-cli2中使用postcss-pxtorem 時配置
首先安裝postcss-pxtorem npm install postcss-pxtorem --save-dev
找到.postcssrc.js文件配置postcss-pxtorem,在plugins對象下添加屬性。
"postcss-pxtorem": {
"rootValue": 75,
"propList": ['*','!font','!font-size']
},
在vue-cli3中使用postcss-pxtorem 時配置
這個看你的的選擇，有可能在postcss.config.js文件或者package.json文件。配置方式和vue-cli2一樣
最后就按照750px視覺稿直接用px開發(fā)?。?！當(dāng)然你可能需要更多的PostCSS插件來輔助的你的開發(fā)，可以參考我的另一篇文章Vue2.x 中使用vw完成移動端頁面適配對有關(guān)插件的介紹
3.Vue 2.x +amfe-flexible +使用ui框架方式
這種方式和Vue 2.x +amfe-flexible幾乎一樣。唯一的不同是，我們需要使用postcss-plugin-px2rem 進(jìn)行px到rem轉(zhuǎn)換。因?yàn)槲覀冃枰懦齯i框架目錄，避免ui變形。
找到.postcssrc.js文件配置postcss-plugin-px2rem,在plugins對象下添加屬性。
"postcss-plugin-px2rem":{
"rootValue": 75,
"propBlackList":['font','font-size'],
exclude: /(node_module)/,
}
