vue中px轉rem

1. 設置根節點HTML的font-size

1. 新建px2rem.js文件，放在項目根目錄utils目錄下，代碼如下：

   // 基準大小，設置20px爲基準，便於自己寫代碼時計算rem的值
   const baseSize = 20;
   // 設置 rem 函數
   function setRem () {
   	// 當前頁面寬度相對於 768 寬的縮放比例，可根據自己需要修改。
   	const scale = document.documentElement.clientWidth / 768;
   	// 設置頁面根節點字體大小
   	document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
   }
   // 初始化
   setRem();
   // 改變窗口大小時重新設置 rem
   window.onresize = function () {
   	setRem();
   };
   

2. 在main.js中引入px2rem.js

   import '../utils/px2rem'
   

   這時頁面HTML的font-size已被自動添加。

2. 使用postcss-pxtorem將px自動轉爲rem

1. 安裝postcss-pxtorem

   $ npm i postcss-pxtorem -S
   

2. 修改根目錄.postcssrc.js文件，在找到 plugins 屬性新增pxtorem的設置

   "postcss-pxtorem": {
     "rootValue": 20, //與px2rem.js中的baseSize保持一致
     "propList": ["*"]
   }
   

注意：此方法支持import 和 .vue單文件中style。暫不支持style中使用@import url()以及內聯樣式中的style