Step1：導(dǎo)入rem計(jì)算公式；
1. 創(chuàng)建：
在src目錄下創(chuàng)建config文件夾并在目錄下創(chuàng)建rem.js文件寫入如下代碼工禾；
(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();
2. 引入：
在src\main.js中導(dǎo)入之前創(chuàng)建的js文件；
import './config/rem.js'
Step2：安裝并設(shè)置px2rem插件；
1. 安裝：
$ cnpm install px2rem-loader
2. 設(shè)置：
在項(xiàng)目中找到build\utils.js，定位至function generateLoaders在其上方定義如下：
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 50 /* 此處50為可調(diào)整的值 */
}
}
// 以上的添加的px2rem的定義
// 在下方generateLoaders方法中添加[cssLoader,px2remLoader]
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 此處為添加的定義 */
備注：remUnit: 50 /* 此處50為可調(diào)整的值 */此處50由設(shè)計(jì)稿尺寸決定（eg：當(dāng)設(shè)計(jì)稿為375時(shí)恩静，打開網(wǎng)頁進(jìn)入調(diào)試模式將網(wǎng)頁寬度調(diào)整至與設(shè)計(jì)稿相同，得到的html的font-size即為需要設(shè)置的值）
<html style="font-size: 50px;">
1540711565379.png
Step3：使用px2rem插件妇萄；
1. 使用：
直接設(shè)置css樣式使用px單位即可蜕企，如果不需要自動(dòng)轉(zhuǎn)換則在其后面加上/*no*/
<style scoped>
.detail-page {
width: 20px;
height: 40px; /*no*/
}
</style>
