屏幕适配方案-postcss-px-to-viewport

768 阅读1分钟
  1. 安装postcss-loader或者postcss-px-to-viewport插件
  2. 配置webpack的postcss-loader
  3. 配置postcss.config.js
modules.exports = {
   // plugins:[
     //   require('autoprefixer') //自动补充css前缀
   // ]
   
   plugins:[
        "autoprefixer":{},
        "postcss-px-to-viewport":{
            unitToConvert: "px",      //要转换的单位
            viewPortWidth: "1920",    //viewPort的宽度
            viewPortHeight: "1080",   //viewPort的高度
            unitPrecision: 3,         //指定px转换为视图单位值的小数位数
            selectorBlackList: ['.ignore','.hairlines'],    //指定不转换成目标视图单位的类
            minPixelValue: 1,        //最小阈值,小于等于该值时不转换
            mediaQuery:false         //是否在媒体查询时也转换为目标视图单位
        }
   ]
}