移动端适配方案，同时把px转成vw

开发项目时，按照设计稿开发，上传项目时，借助该插件，快速进行适配

 

1.在项目中安装 postcss-px-to-viewport 插件

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

---

2.在postcss.config.js中进行配置

---

3.配置信息

//安装postcss-px-to-viewport插件后的配置
module.exports = {
  plugins:{
    autoprefixer:{},
    "postcss-px-to-viewport":{
      viewportWidth:375,  //视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight:667, //视窗的高度，对应的是我们设计稿的高度
      unitPrecision:5,    //指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
      viewportUnit:'vw',  //指定需要转换的视窗单位，建议使用vw
      selectorBlackList:['ignore','tabbar','tabbar-item'],//指定不需要转换的类
      minPixelValue:1,    //小于或等于'1px'不转换为视窗单位
      mediaQyery:false,   //是否允许在媒体查询中转换'px',
      exclude:[/DetailBottomBar/,/TabbarItem/]   //包含DetailBottomBar的文件不需要转化  写正则
    },
  }
}

---

3.大功告成