vue移動端項目使用第三方ui框架適配rem的問題

近期使用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以後，在配置中修改轉換比便可。以下圖：