vue3.0 依赖 postcss-px2rem-exclude 插件做自适应

效果图

1、下载依赖 cnpm install postcss-px2rem px2rem-loader --svae

2、在utils 文件下新建一个rem.js 文件

// 基准大小
const baseSize = 14
    // 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于1440宽的缩放比例，基准宽度可根据自己ui设计图修改。
    const scale = document.documentElement.clientWidth / 1440
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
    //监听窗口变化 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

3、在 vue.config.js 文件配置

  // 引入等比适配插件
  const px2rem = require('postcss-px2rem');
  // 配置基本大小
  const postcss = px2rem({
      // 基准大小 baseSize，需要和rem.js中相同
      remUnit: 14
  })
  module.exports = {
      css: {
          // 是否使用css分离插件 ExtractTextPlugin
          extract: true,
          // 开启 CSS source maps?
          sourceMap: false,
          // css预设器配置项
          loaderOptions: {
              postcss: {
                  plugins: [
                      postcss
                  ]
              }
          }
      },

  }

注意：内联样式，是不会翻译成rem的