目前移動端應該大都是用rem來做自適應布局，下面是關於如何基於vue-cli配置的項目做移動端屏幕適配。
1.安裝lib-flexible
在命令行中輸入並運行：npm i lib-flexible --save
2.在項目入口文件main.js中引入lib-flexible
import 'lib-flexible'
這個時候我們可以npm run dev看一下，已經有了效果。
但是這不是我們最終想要的，到這一步意味着我們還是需要根據UI效果圖將px轉成rem，這樣的計算實在是太繁瑣，之前本人的做法是通過sass寫一個方法將px轉rem，這樣一來我需要將每一個頁面、組件都引入這個sass文件或者每一個頁面、組件都加上這一個方法，問題是解決了但是不夠優雅，好在網上的大神很多。在github上看到了https://github.com/songsiqi/px2rem-postcss
3.安裝postcss-loader、postcss-px2rem
在命令行中輸入並運行：npm install postcss-loader postcss-px2rem --save
注：我用的是cnpm是因為安裝了淘寶鏡像，沒有安裝淘寶鏡像就是npm
4.修改項目build文件夾下的vue-loader.conf.js文件
在module.exports中加入postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]
因為是以750px的UI設計圖為標准，所以remUnit的值為75。
修改了vue-loader.conf.js文件我們需要在終端重新輸入並運行npm run dev
最終如圖結果：
原文：https://blog.csdn.net/ly272864318/article/details/80100367