vue3 vite里怎么postcss-px-to-viewport怎么根据浏览器来自己写方法来设置px转换vw的比例

在 Vue3 + Vite 中使用 `postcss-px-to-viewport` 实现 px 转换为 vw，可以按照以下步骤进行设置：

1. 安装 `postcss-px-to-viewport`：

   npm install postcss-px-to-viewport --save-dev

2. 在项目根目录下新建 `postcss.config.js` 文件，并添加以下内容：

   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 375, // 设计稿宽度
         unitPrecision: 3, // 转换后保留的小数位数
         viewportUnit: 'vw', // 转换后的单位
         selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
         minPixelValue: 1, // 小于或等于 1px 不转换
         mediaQuery: false, // 允许在媒体查询中转换 px
         exclude: undefined, // 排除某些文件夹下的文件
         landscape: false, // 是否支持横屏
         landscapeUnit: 'vw', // 横屏时使用的单位
         landscapeWidth: 568, // 横屏时使用的视窗宽度
       },
     },
   };

3. 在 `vite.config.js` 中引入 `postcss.config.js`：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import postcss from 'rollup-plugin-postcss';
   import autoprefixer from 'autoprefixer';
   import postcssPresetEnv from 'postcss-preset-env';
   import postcssImport from 'postcss-import';
   import postcssUrl from 'postcss-url';
   import postcssCustomProperties from 'postcss-custom-properties';
   import postcssPxToViewport from 'postcss-px-to-viewport';

   export default defineConfig({
     plugins: [
       vue(),
       postcss({
         plugins: [
           autoprefixer(),
           postcssPresetEnv(),
           postcssImport(),
           postcssUrl(),
           postcssCustomProperties(),
           postcssPxToViewport({
             viewportWidth: 375, // 设计稿宽度
             unitPrecision: 3, // 转换后保留的小数位数
             viewportUnit: 'vw', // 转换后的单位
             selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
             minPixelValue: 1, // 小于或等于 1px 不转换
             mediaQuery: false, // 允许在媒体查询中转换 px
             exclude: undefined, // 排除某些文件夹下的文件
             landscape: false, // 是否支持横屏
             landscapeUnit: 'vw', // 横屏时使用的单位
             landscapeWidth: 568, // 横屏时使用的视窗宽度
           }),
         ],
         extract: 'styles.css',
       }),
     ],
   });

4. 在 CSS 中使用 px 单位，插件会自动将其转换为 vw。

   .box {
     width: 100px; /* 会被转换为 26.6667vw */
     height: 100px; /* 会被转换为 26.6667vw */
   }

如果需要根据不同的浏览器设置不同的转换比例，可以在 `postcss.config.js` 中自定义插件，在插件中根据浏览器信息来动态设置 `viewportWidth` 参数。以下是一个示例：

const postcssPxToVw = require('postcss-px-to-viewport');

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      exclude: undefined,
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568,
    },
    'postcss-plugin': function (options) {
      return function (root, result) {
        const browser = result.opts.browser;
        let viewportWidth = 375; // 默认值
        if (browser === 'Chrome') {
          // 根据浏览器类型动态设置 viewportWidth 参数
          viewportWidth = 750;
        } else if (browser === 'Safari') {
          viewportWidth = 414;
        }
        postcssPxToVw({
          viewportWidth,
          unitPrecision: 3,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: undefined,
          landscape: false,
          landscapeUnit: 'vw',
          landscapeWidth: 568,
        })(root, result);
      };
    },
  },
};

在 `vite.config.js` 中可以通过 `css` 选项将浏览器信息传递给 `postcss-plugin` 插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import postcssImport from 'postcss-import';
import postcssUrl from 'postcss-url';
import postcssCustomProperties from 'postcss-custom-properties';
import postcssPxToVw from 'postcss-px-to-viewport';
import postcssPlugin from './postcss-plugin';

export default defineConfig({
  plugins: [
    vue(),
    postcss({
      plugins: [
        autoprefixer(),
        postcssPresetEnv(),
        postcssImport(),
        postcssUrl(),
        postcssCustomProperties(),
        postcssPxToVw({
          viewportWidth: 375,
          unitPrecision: 3,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore', '.hairlines'],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: undefined,
          landscape: false,
          landscapeUnit: 'vw',
          landscapeWidth: 568,
        }),
        postcssPlugin(),
      ],
      extract: 'styles.css',
    }),
  ],
  css: {
    postcss: {
      plugins: {
        'postcss-plugin': {
          browser: 'Chrome', // 浏览器类型
        },
      },
    },
  },
});