Vue3+Vite 利用postcss-pxtorem移动端适配

1.介绍

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

介绍amfe-flexible
amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

autoprefixer介绍

Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里，使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss，使用Browserslist库，可以对浏览器的版本做精确设置。

安装

npm install postcss postcss-pxtorem --save
npm install amfe-flexible --save
npm install autoprefixer --save

2.进行配置使用

首先在main.ts中引入

import 'amfe-flexible'

在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
})

小菜鸡一个，自己试验成功了，还请各位大佬指正