vue适配

postcss-pxtorem是一个PostCSS插件，用于将像素单位（px）转换为rem单位。它可以帮助开发者在项目中更好地处理响应式布局和屏幕适配

1、安装插件

npm install postcss-pxtorem --save

2 、新建postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16, // 基准值，可以根据需求修改
      unitPrecision: 5, 
      propList: ['*'],
      selectorBlackList: ['body'],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
    },
  },
};

3、在util下目录下配置rem.js文件

function getHeightRate() {
  const {
    clientHeight,
  } = document.documentElement;
  return clientHeight / 1080;
}

function setRootFontSize() {
  document.documentElement.style.fontSize = `${getHeightRate() * 18}px`;
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

export {
  // eslint-disable-next-line import/prefer-default-export
  getHeightRate,
};

4、在main.js文件中引入rem.js

import '@/utils/rem';

这样就完成适配啦，后续开发单位就直接用px，在浏览器控制台可以看到px被转成了rem

有问题欢迎指出~