Vue中将px自动转化为rem

1. 安装所需插件

• amfe-flexible：自动计算font-size并添加到html标签上。如果你有自己的font-size计算方法，可以不引入这个插件。这是我自己的font-size方法，可供参考。

/**
 * 计算font-size，并添加到html标签中
 */
(function (doc, win) {
  var docEl = doc.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    win.fontSize = 100 * (clientWidth / 750);
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

• postcss-plugin-px2rem：将px转化为rem。但对于内联样式中的px，无法转化。如：<p style="margin-left: 10px;"></p>，无法转化。

npm i amfe-flexible -S

npm i postcss-plugin-px2rem -D

3. main.js中引入

import 'amfe-flexible';

3. vue.config.js 中，对 postcss-plugin-px2rem 插件自定义配置

	module.exports = {
	  css: {
	    loaderOptions: {
	      postcss: {
	        plugins: [
	          require('postcss-plugin-px2rem')({
	            rootValue: 50, // 换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
	            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
	            // propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
	            // propBlackList: [], //黑名单
	            exclude: false, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
	            // exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
	            // selectorBlackList: [], //要忽略并保留为px的选择器
	            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
	            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
	            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
	            minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
	          })
	        ]
	      }
	    }
	  }
	};