做移動端時，適配 是必須的。使用rem單位，可在不同螢幕上完美顯示相同的佈局。px2rem 外掛方便的將px單位轉為了rem。 
px2rem 地址：https://www.npmjs.com/package/px2rem 
使用方式： 
1、安裝 npm install px2rem-loader 或者 cnpm install px2rem-loader 
2、vue中配置 在build下的 utils.js中，找到generateLoaders 方法，在這裡新增 。

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64//設計稿寬度/10
    }
  };

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader];//新增px2rem 外掛
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

3、安裝配置結束後，重啟專案 。然後再瀏覽器中檢視。會發現自己設定的px被轉為rem 了。 
4、使用時，可使用大寫Px將單位px不轉為rem 
font-size:26Px /* no*/ px不轉成rem 
font-size:26px px轉成rem

本文只是對vue中使用px2rem方式的說明，想要研究原理的請移步到官網或github 。
--------------------- 
作者：LingRuiBin 
來源：CSDN 
原文：https://blog.csdn.net/qq_29484537/article/details/77977877 
版權宣告：本文為博主原創文章，轉載請附上博文連結！