因為公司有個項目有webapp的需求，在前期准備的期間考慮過使用ionic，畢竟該項目web端的框架使用的是Angular，項目組的人也都比較熟悉，但是我們畢竟只是做個移動的網頁，不想用ionic那么繁瑣的東西，最終我還是選了vue。
開始的設想是vue+Muse-ui或者Mint-ui(各有優缺點)+flexible.js，在做到手機端兼容的同時結合ui框架讓項目更好看些，然后就開始動手做！
這個時候需要說下flexible.js，阿里開源的移動端適配代碼，很好用，不過也有他的缺點，比如不兼容ipad，因為公司的項目沒有考慮兼容ipad，也就沒想那么多，還是使用flexible.js。相信使用過它的人都知道，有個東西叫做px2rem，很方便我們直接對着設計稿寫px的代碼（假使設計稿是750px的），我們只需要在vue-cli生成的項目文件夾build里增加如下配置：
const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
當然別忘了main.js里增加 ：import ‘lib-flexible’
這樣我們寫的px的代碼，webpack會自動幫我們去轉成rem的形式以做到適配各個移動設備，但是問題來了，我們在使用Muse-ui或者Mint-ui的時候樣式會變的很小，看着非常別扭，這個地方糾結了很久，為什么沒有做的想象中的自適應？
原因是我們之前配置的px2rem也會把我們引入的ui組件也轉換成rem的格式，本身組件已經是為移動端做了適配，px2rem又轉成了rem就導致其樣式變的很小，解決辦法就是我們還是使用flexible.js（中間有放棄使用的想法，想直接寫個rem.js去動態查詢然后設置font-size，單位也就全使用手寫的rem，不過還是打消了這個念頭），然后不使用px2rem，也就是不要上面的配置（注意注銷上面添加的配置px2remLoader ）
// px2remLoader暫時不用 function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
可能有人會問那這個時候flexible.js還有什么作用呢？答案是我們在需要轉rem的地方手動寫rem,這樣引入的ui組件樣式就不會變小，而是很美觀了。我用的IDE是VScode，設計稿750的話，如果每個需要適配的單位都去計算rem是很麻煩的，推薦px to rem這個插件，然后將16設置為75（設計稿為750px） 
這個時候我們直接寫px，選中后alt+z就直接轉換為rem了，這也算項目剛開始遇到的一個小坑吧
轉自：http://blog.csdn.net/zhanglong_web/article/details/78649717
http://blog.csdn.net/Coding_Jia/article/details/78866220