近期使用vue開發移動端專案，引入了mint-ui框架。由於mint-ui框架中css樣式使用了px作為單位，無法使用rem適配不同裝置的螢幕。

方案一，使用px2rem-loader將px轉為rem

第一步：在終端中安裝px2rem-loader

npm install px2rem-loader --save-dev
複製程式碼

第二步：然後在vue-cli專案找到build/utils檔案，在裡面加上以下程式碼：

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
}
複製程式碼

因為我們這邊UI設計圖是750的尺寸，所以我就把轉換比設成了75，其實設成多少無所謂，反正外掛會幫你計算的。

第三步：在當前檔案中修改配置，如下圖：

第四步：在入口檔案中引入lib-flexible，進行適配。

前提是先安裝後引入。安裝命令：

npm install lib-flexible --save-dev
複製程式碼

之後就可以在專案中放心使用px了，外掛會幫你自動轉換的哦！！！

方案二，使用IDE自帶的轉換器。

我使用的是VS code，在擴充套件程式中安裝px2rem之後，在配置中修改轉換比即可。如下圖：