postcss-pxtorem是一款基于PostCSS插件，用于将像素单位生成rem单位。
这款插件能够让开发人员直接按照设计图的尺寸开发，并且能自动将像素单位编译转换成rem。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem，然而每次在制作过程中需要自己计算rem值，非常不便。接下来介绍一下postcss-pxtorem的使用。

一、postcss-pxtorem 配置步骤

1. 安装postcss-pxtorem依赖

cnpm install postcss-pxtorem --save-dev

2. vue-cli2开发环境中

在根目录中的 .postcss.js (没有新建即可)，添加如下代码：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 100, // 换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
      unitPrecision: 5,  //保留rem小数点多少位
      propList: ['*', '!border', '!font-size'], //  存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
      selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
      replace: true,
      mediaQuery: false,//（布尔值）媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12,///设置要替换的最小像素值，px小于12的不会被转换
      //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性
      propBlackList: ['font-size'], //黑名单
    }
  }
}

3、vue-cli3开发环境中

（1 在根目录 vue.config.js (没有新建即可)中，添加如下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*', '!font-size'],
            exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
            mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  }
}

或者，在postcss.config.js添加如下代码：

module.exports = {
  plugins: {
    "postcss-pxtorem": { // 把px单位换算成rem单位
      rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
      propList: ['*', '!font-size'],
      exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
      // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    }
  }
}

（2 新建一个rem.js

作用：切换页面时动态更新html(根标签)的font-size，并添加如下代码：

(function (window, document) {
    // 设置 rem 函数
    function remLayout() {
        // 获取屏幕宽度
        let ww = document.documentElement.clientWidth || document.body.clientWidth;
        // 限制屏幕宽度
        ww = ww > 768 ? 768 : ww;
        ww = ww <= 320 ? 320 : ww;
        /*  以设计稿分辨率为基准，取100px为font-size的参照，    75px 
            那么设计稿的宽如果是750，body元素的宽度就可以设置为width:7.5rem（750/100），   
            当我们将布局视口设置为375时，于是html的font-size=deviceWidth / 7.5。
        */
        document.documentElement.style.fontSize = ww / 7.5 + 'px';
    }
    // 初始化
    remLayout()
    // 改变窗口大小时重新设置 rem
    window.addEventListener('resize', remLayout, false);
})(window, document);

（3 在main.js中导入rem.js

import './rem.js'

postcss-pxtoremgithub地址：postcss-pxtorem

二、配置完就可以直接用px做单位按照750的设计稿撸代码了！！！

福利：前端常用插件: 下拉刷新、上拉加载，左右滑动，移动端调试，图片预览、放大缩小、旋转.

看都看到这了，来个炫酷三连击 ——点赞、收藏、留言。