关于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();  });});