使用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镇楼！