vue3.2-cli+TS+postcss-pxtorem移动端自适应方案

1. 安装postcss-pxtorem npm i postcss-pxtorem

2. 新建rem.js 或者 rem.ts文件，放入以下内容

// 基准大小
const baseSize = 16;

// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375;
  // 设置页面根节点字体大小,Math.min(scal,2)表示最大缩放比例为2
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
}

// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

3. main.ts中引入rem.js / rem.ts import 'xx/rem.js'

4. src同级目录下新建 postcss.config.js并放入以下内容

const px2rem = require("postcss-px2rem");
const postcss = px2rem({
  remUnit: 16, //基准大小 baseSize，需要和rem.js中相同
});

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss],
      },
    },
  },
};

至此为止，vue3.2-cli+TS+postcss-pxtorem移动端自适应方案大功告成。值得一提的是，如果将postcss.config.js文件中的内容放入到vue.config.js中，则会报错。