VUE开发移动端使用rem和引入组件库像素比例不同的问题

px、em、rem区别介绍

postcss

引入postcss-pxtorem并配置postcss

npm install postcss-pxtorem --save-dev

根目录没有postcss.config.js新建一个

module.exports = ({ file }) => {
  // 项目引入了vantui,使用的像素比例跟项目设计图的不一致，配置对vant文件使用更小的rootValue
  let rootValue
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 16
  } else {
    rootValue = 37.5
  }
  // 如不需要可以直接写固定rootValue值
  return {
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue,
        propList: ['*'],
        selectorBlackList: [] // 忽略类名如'van-input'
      }
    }
  }
}

重点：给body添加font-size

新建js并在main.js引入

setRem();
window.onresize = function () {
  setRem()
}

/** 计算rem*/
function setRem () {
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlWidth / 20 + 'px';
}

禁止用户缩放
index.html头部添加

The End

run dev或者 run serve查看效果吧