vue中px自动转rem插件使用

在用vue写移动端的项目时会用到rem适配，而将px计算转换rem比较麻烦也不好修改，并且许多UI插件使用的单位仍然是px,这时我们可以使用 postcss-pxtorem 工具帮助我们自动转换。

以 vue-cli2.0 创建的项目为例：
1.在 src/assets/js/ 文件夹下创建 rem.js 文件，自定义 html 的 font-size 大小，例：

/* 移动端适配 */
;(function(doc, win, width){
  var docEl = doc.documentElement;
  var head = doc.getElementsByTagName("head")[0];
  var hFirst = head.firstChild || head.firstElementChild; 
  var cssEl = doc.createElement('style');
  //手机横屏，竖屏可在此处设置 
  var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
  var recalc = function() {   
    var x; 
    var n = win.devicePixelRatio;      
    if (n >= 3) {                
        x = 3;                    
    } else if (n >= 2){
        x = 2;
    } else {
        x = 1;
    }
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    var pxPerRem = 100*(clientWidth / width);
    cssEl.innerHTML = 'html{ font-size:' + pxPerRem + 'px!important; }';
    docEl.setAttribute("data-dpr", x);   //x 限制范围取值 1,2,3
    head.appendChild(cssEl);   
  };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,750)
// 若初始化为 375px, 此时整个屏幕宽度为 3.75rem
// 若初始化为 750px, 此时整个屏幕宽度为 7.5rem
// 若初始化为 640px,(document, window,640), 此时整个屏幕宽度为 6.4rem  
// 本例以 750 的设计稿为例， 最终结果 1rem = 100px

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

import Vue from 'vue'
import App from './App'
//......

//rem 适配  1rem = 100px
import '@/assets/js/rem'

3.安装工具插件 postcss-pxtorem

npm install postcss-pxtorem --save-dev

4.修改项目中的 .postcssrc.js 文件(注：与index.html，package.json 等同级的文件)，可以在此配置的基础上根据项目需求进行修改。

module.exports = {
  plugins: {
    //......  其他的配置项
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 100,        //本例配置的适配 1rem=100px
      propList: ['*']
    }
  }
}

使用说明
本例设计稿为宽度 750px ,上面设置的适配为 1rem=100px。

若不想转 rem 保留 px 单位可如下操作：
1.写在行内样式中的px不会被转化,例

中的120px 不会被转化。
2.单位含有大写字母时不会被转化，例如：20Px，20PX 。

/* 按照设计稿中的实际尺寸写，无需做任何改变 */
.box{
  width: 255px;
  border: 1px solid red;
}
/* 如果想保留px，则将px写成 PX 或 Px */
.top{
  width: 255PX;
  height: 50Px;
  border: 1PX solid red;
}

最终解析为:

  
.box{
  width: 2.55rem;
  border: 0.01rem solid red;
}

.top{
  width: 255px;
  height: 50px;
  border: 1px solid red;
}