vant适配移动端750设计稿

前言

按照vant官网给的rem适配，第一步安装 postcss-pxtorem：npm install postcss-pxtorem；

第二步安装lib-flexible：npm i -S amfe-flexible，记得在main.js文件引入 import 'amfe-flexible'；

第三步进行 postcss配置      

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

按照上面配置的话，引入的vant组件样式是正常的，但是其他就显示不正常。因为vant设计稿是375px,而我们的设计稿是750px，如果把上面配置中的rootValue改为75，那么vant组件就会缩小一半，如下图所示：

显然，我们要去解决这个问题。

解决方法

将postcss配置 改写

const path = require('path');
module.exports = ({file}) =>{
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;
  return {
    plugins: {
      autoprefixer: {
        browsers: ['Android >= 4.0', 'iOS >= 8'],
      },
      'postcss-pxtorem': {
        rootValue: designWidth,
        propList: ['*'],
      },
    },
  }
  
};