【Plugin】postcss-px2rem 插件进行内容自适应

1.安装

npm i postcss-px2rem -D

2.vue.config.js 文件中

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
  remUnit: 192 //基准大小 baseSize，需要和rem.js中相同 
});
module.exports = {
// 其他内容
 css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
};

3.在src下创建rem.js文件夹

export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
    
    // 这个if语句代码，是用来控制屏幕的最小宽度，不需要可以可以不写
    if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= 130) {
      document.documentElement.style.fontSize = '130px';
    }
  
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener('resize', setRem);
}

4.在main.js中引用rem.js

import { setRemInit } from '@/rem';

setRemInit(); //进行初始化立即运行

注：参数解释：
baseSize是用来设置html font-size的大小 。
remUnit在postcss-px2rem中对你设置px转化为rem，例如，width: 1920px, remUnit = 192 。 则页面渲染完成后，你会发现， width : 10rem; 1920/192 =10。 所以你要保证baseSize和remUnit对值始终一致，这样才能将html font-size和px建立正确对关系