2025-09-16 【架构】自适应方案

postcss-px-to-viewport 和 postcss-pxtorem

postcss-px-to-viewport 和 postcss-pxtorem 是两个 postcss 插件，可以将 px 单位转换为 vw 或 rem 单位，以达到自适应的效果。

1. 安装依赖：

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

1. 配置 vite.config.ts

css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 192, // pc端建议：192，移动端建议：75；设计稿宽度的1 / 10
            propList: ['*', '!border'], // 除 border 外所有px 转 rem // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['.norem'], // 过滤掉norem-开头的class，不进行rem转换，这个内容可以不写
            unitPrecision: 5, // 转换后的精度，即小数点位数
            replace: true, // 是否直接更换属性值而不添加备份属性
            mediaQuery: false, // 是否在媒体查询中也转换px为rem
            minPixelValue: 0, // 设置要转换的最小像素值
            // exclude: /^(?.*\/src\/home(\/|$)).*/
            exclude: (file: string) => {
              console.log(file);
              let exclude = false;
              const whiteList = ['login/index.vue', 'node_modules/']; // 白名单，只转换白名单内的svg文件
              whiteList.forEach((item) => {
                if (file.includes(item)) {
                  exclude = true;
                }
              });
              return exclude;
            },
          }),
        ],
      },
    },

浏览器兼容

1. 添加浏览器前缀：使用 Autoprefixer 插件为 CSS 添加必要的浏览器前缀，确保兼容性。