使用vue vantUi框架 根字體是37.5 和默認根字體75不一致，致使頁面組件樣式變小

VUE 使用的時候，想要作移動端自適應，而一開始沒有料到用vantUI框架，因此在utils.js中，因爲引用了px2rem-loader和lib-flexible，因此要設置：

 

const px2remLoader = {
　　loader：'px2rem-loader',
　　options:{
　　　　remUnit:75
　　}
}

 

可是後期，發現本身要用vantUI框架，而當我引入以後，發現全部的組件樣式都比樣例要小，一開始非常懵逼···  後來查詢以後發現，原來是由於vantUI的根字體默認大小是37.5，和咱們默認設置的75不同，正好是2倍關係，因此當咱們的設計圖是750的時候，咱們的組件就會看起來是1/2的大小，解決這種問題有三種方法：

一、本身提早預估本身要用vant，因此設置爲37.5，並在測量本身的設計圖時，自動計算爲1/2來佈局，這種顯然是個很雞肋的辦法，簡言之：能夠但不必！

二、不用px2rem-loader和lib-flexible搭配，而是使用：lib-flexible和postcss-pxtorem搭配，由於lib-flexible和postcss-pxtorem裏面有一個過濾功能，可讓咱們過濾掉以van開頭的樣式：在引入的postcssrc.js裏面設置：

module.exports={
　　plugins:{
　　　　····,
　　　　'postcss-pxtorem':{
　　　　　　rootValue:75,
　　　　　　propList:['*'],
　　　　　　selectorBlackList:['van']
　　　　}
　　}
}

 

三、若是上面的不想用的話，就用下面這個嘍！可是前提，若是已經使用了第二個，就要把那個過濾的設置給註釋或者刪除，不然可能會影響。第三種辦法就是使用判斷條件，依然是在postcssrc.js裏面修改：

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
　　let remUnit;
　　// 判斷條件 請自行調整 我使用的是 mand-mobile ui 沒有對vant引入進行測試
　　//link https://github.com/youzan/vant/issues/1181
　　if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
　　　　remUnit = 37.5;
　　}else {
　　　　remUnit = 75;
　　}
　　return {
　　　　plugins: [
　　　　　　px2rem({ remUnit: remUnit}),
　　　　　　AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })

　　　　]
　　};
};

 

以上就是目前我所知道的解決方法，但願對本身有所幫助！最後依然是咱們最萌最帥最有型的DK鎮樓！