Vue2.0配置postcss-px2rem

• 安装postcss-px2rem：npm install postcss-px2rem
• 配置remUnit：

      在根目录下的vue.config.js文件中添加以下配置：

       

module.exports = {
    css:{
        loaderOptions:{
            postcss:{
                plugins:[
                    require('postcss-px2rem')({remunit:37.5}),
                ]
            }
        }
    }
}

 

• remUnit: 37.5  代表 1rem = 37.5px;  所以当你一个37.5px值时，它会自动转成   (37.5px/37.5)rem。转化完之后，你还需要在根元素设置font-size,因为rem是相对根元素来设置大小的。

• 在根目录下的App.vue中配置根元素的font-size：

  <style>
  body,html{
      font-size:10vw;
  }
  </style>

  在以上的配置中，当实际页面宽度为375px时，刚好铺满屏幕。所以此时前端可以根据宽度为375px的UI页面进行开发。