vue3 postcss-pxtorem pc适配

Vue3 中使用 PostCSS px-to-rem 插件进行 PC 端适配是为了将设计稿中的像素单位 (px) 转换为相对单位 rem，以便实现响应式设计。PostCSS-pxtorem 根据根元素的 font-size 来计算 rem 的值，这样在不同分辨率下，页面的尺寸会按照设计稿的比例缩放。

以下是基本步骤：

1. 安装依赖：
在 Vue 项目中安装 `postcss`、`autoprefixer` 和 `postcss-pxtorem` 这些插件：

   npm install postcss autoprefixer postcss-pxtorem --save-dev

2. 配置 PostCSS：
在 `vue.config.js` 或 `.postcssrc.js` 文件中配置 PostCSS，添加 postcss-pxtorem 插件：

   // .postcssrc.js
   module.exports = {
     plugins: [
       require('postcss'),
       require('autoprefixer'),
       require('postcss-pxtorem')({
         rootValue: 100, // 设定字体大小基准，默认100px
         unitToRem: true, // 将px转换为rem
       }),
     ],
   };

3. 应用到 Vue 元素上：
在需要应用 rem 单位的 CSS 类中，直接使用 px 单位即可。例如：

   .container {
     width: 375px; // 这里会自动转为 37.5rem
     height: 750px;
   }