vue-cli3中使用rem单位适配移动端

1. 下载依赖 lib-flexible postcss-pxtorem

npm i lib-flexible postcss-pxtorem

2. 在main.js中引入

import 'lib-flexible/flexible'

3. 在package.json中添加配置

"postcss": {
      "plugins":{
        "autoprefixer":{},
        "postcss-pxtorem":{
          "rootValue":75,
          "propList":["*"]
        }
      }
    }

在样式中直接使用px单位，编译时会自动编译为rem单位,如果想要将大小固定，可直接使用大写的PX

4. 添加rem.js使得rem随着屏幕尺寸变化而实时变化

const baseSize = 32
// 设置rem函数
function setRem(){
    // 当前页面宽度相对于750宽的缩放比例,可根据自己需要修改
    const scale = document.documentElement.clientWidth / 750
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale,2))+'px'
}

// 初始化
setRem()

//  改变窗口大小时重新设置rem
window.onresize = function(){
    setRem()
}

5. 在main.js中引入rem.js

import '@/assets/js/rem'