关于vue3:vue3-vite4-中-配置px转rem

下载依赖:
amfe-flexible: 挪动端适配
文档: https://www.npmjs.com/package/amfe-flexible
下载: npm install amfe-flexible
postcss-pxtorem: px转rem
文档: https://www.npmjs.com/package/postcss-pxtorem
下载: npm install postcss-pxtorem

2.引入配置:
main.ts:
/ px转rem /
import “amfe-flexible”;
vite.config.ts:

/* 引入px转rem */
const postCssPxToRem = require("postcss-pxtorem");

在css局部增加:

css: {
  // 此代码为适配挪动端px2rem
  postcss: {
    plugins: [
      postCssPxToRem({
        rootValue: 37.5, // 1rem的大小（管制1rem的大小  点位：px）
        propList: ["*"], // 须要转换的属性，这里抉择全副都进行转换
      }),
    ],
  },
},

3.设置,在App.vue中初始化:

onMounted(() => {
  /* px转rem */
  const baseSize = 38;
  /* 设置 rem 函数 */
  function setRem() {
    /* 以后页面宽度缩放比例，可依据本人须要批改 */
    const scale = document.documentElement.clientWidth / 1920;
    /* 设置页面根节点字体大小 */
    document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
  }
  /* 初始化 rem */
  setRem();

  window.onresize = () => {
    /* 扭转窗口大小时从新设置 rem */
    setRem();
  });
});