VUE移动端适配,将px转换成vw插件使用

一.在终端中进行

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

二.这时会生成一个postcss.config.js文件,如果没有就手动创建一个

在postcss.config.js里面添加
    module.exports ={
  plugins:{
    autoprefixer:{},
    "postcss-px-to-viewport":{
      viewportWidth:375, //视窗的宽度,对应的是我们设计稿的宽度
      viewportHeight:667,//视窗的高度,对应的是我们设计稿的高度(也可以不配置)
      unitPrecision:5, //指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
      viewportUnit:'vw',//指定需要转换成的视窗单位,建议使用vw
      minPixelValue:1,//小于或者等于'1px'不转换为视窗单位
      mediaQuery:false,//允许在媒体查询中转换'px'
      
      selectorBlackList:['tabBar','tabBaritem'],//指定不需要转换的类,或者在不需要转换的,写的时候后面多跟一个类名
      exclude:[/tabbar/]
    }
  }
}

你可能感兴趣的:(VUE移动端适配,将px转换成vw插件使用)