vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装

npm i postcss-plugin-px2rem --save -dev --force

2. 找到 postcss.config.cjs 没有的话就新建一个

module.exports = {
  plugins: {
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {},
    "postcss-plugin-px2rem": {
      rootValue: 16, // 设计稿宽度的 1/10
      propBlackList: [
        "border",
        "border-top",
        "border-left",
        "border-right",
        "border-bottom",
      ], // 不需要转换为 rem 单位的 CSS 属性
    },
  },
};

3. 在src->utils->新建文件rem.js

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

4. main.js中引入rem.js

import './utils/rem.js' // 缩放自适应

如果报错
安装autoprefixer

npm i autoprefixer

根目录下文件里面postcss.config.cjs

module.exports = {
  plugins: {
    autoprefixer: {}
  }
};