postcss.config.js

// 一：针对使用px像素开发并且相对当前设计稿的开发者
   // 这个插件，比如此时你是用像素单位px进行开发的，并且针对此时的设计稿的设备宽度375和高度667进行开发的，此时你想要对
    // 按此时这个设计稿设备的比例，对其它设备做一个适配，让其它设备加载的比例和此设备相同，我们就可以下载这个插件，然后
    // 对该文件进行一些配置，到时候插件会来查看该配置文件的信息，然后做一个单位转化，保持一个相对的比例，比如此时的img图片
    // 宽度37.5px，相对当前设备375视口宽度来看，就是10vw的宽度，换到其他设备也就是相同的比例

    // 如果是想转换成rem的话可以选择专门转化成rem的插件

//二：可以一开始就使用rem进行一个适配
   // 设置根元素的font-size 1rem就等于font-size的像素大小，一般可以设置100px方便设置，然后如果要实现比例适配的话，就让
   // 根元素的font-size转换成当前设计稿下对应的vw，此时就实现了相应的效果


module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, // 设计稿视窗的宽度
      viewportHeight: 667, // 设计稿视窗的高度
      unitPrecision: 5, // 把px转化成vw单位的时候保留的小数位数，这里保留5位小鼠
      viewportUnit: 'vw',// 要转换的单位
      selectorBlackList: ['ignore'],// 忽略哪些类是不转换的，比如这里，直接让不想转化做设备适配，固定大小的dom加上一个ingore类名就可以了
      minpixelValue: 1,// 小于等于1px的就不做适配了，保留原有的像素
      mediaQuery: false, // 是否支持媒体查询
      exclude: [/TarBar/] // 必须要用正则，排除哪些文件不做单位转化
    },
  }
}