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頁面進行開發。