PC端屏幕适配

rem.js：

/*
 	@Description: rem等比适配配置文件
 */
// import store from '@/store'

// rem等比适配配置文件
// 基准大小
const baseSize = 14
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    const fontsize = baseSize * Math.min(scale, 4)
    document.documentElement.style.fontSize = `${fontsize >= 12 ? fontsize : 12}px`
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

在main.js里引入

下载 postcss-px2rem

npm install postcss-px2rem -D

在vue.config.js中配置

const px2rem = require('postcss-px2rem')

const postcss = px2rem({
  remUnit: 14 // 基准值
})

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

然后在所有文件中都可以直接使用px进行编码，直接就会进行适配了。无视缩放！！！