Vue中使用rem移动端适配方案

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

Vue中使用rem移动端适配方案

1. 安装依赖

npm install postcss-pxtorem -D

2. 初始化根标签字体大小，设置px与rem的关系

const baseSize = 46 //根据UI尺寸决定

function setRem() {
  const scale = document.documentElement.clientWidth / 1080 //UI尺寸决定

  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
setRem()
window.onresize = function() {
  setRem()
}

3. 在main引入文件

import './utils/rem.js'

4. 设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      'rootValue': 46,
      'propList': ['*']
    },
  }
}