使用vue vantUi框架 根字体是37.5 和默认根字体75不一致,导致页面组件样式变小

可以试下这样去配套组合使用
style的转换:postcss-pxtorem + amfe-flexible
html行内标签的转换:style-vw-loader
怎么装自行百度
这里就贴下怎么配置vue.config.js

module.exports = {
  chainWebpack: config => {
  config.module.rule('vue').test(/.vue$/)
  .use('style-vw-loader')
  .loader('style-vw-loader')
  .options({
    unitToConvert: 'px',
    viewportWidth: 7500,
    unitPrecision: 5,
    viewportUnit: 'rem',
    fontViewportUnit: 'rem',
    minPixelValue: 1
})
},css: {
    loaderOptions: {
        postcss: {
        plugins: [
            require('postcss-pxtorem')({
            rootValue ({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75
            },
            propList: ['*'],
            minPixelValue: 1,
        })
        ],
        }
    }
    }
}

你可能感兴趣的:(移动端适配,vant)