使用vue + postcss-pxtorem 进行px转rem

起因 ：因为公司原有项目中都是使用px进行布局，很多时候会造成不同机型ui出现问题，寻求解决方案使用 postcss-pxtorem进行px转rem进行优化

1.安装插件

    npm install postcss-pxtorem -D 

      *特别注意 如果vue项目是用vue-cli3+版本搭建，正常添加依赖，启动项目不会报错。如果使用vue-cli2版本搭建项目，需要降低postcss-pxtorem版本 使用 npm i postcss-pxtorem@5.1.1 启动就不会报错，一定注意，因为webpack版本问题吧。

2.新建或者修改.postcssrc.js文
    在package.json同级别创建文件

2.在.postcssrc.js中添加如下代码

module.exports = {

  "plugins": 

      "autoprefixer": {

          browsers: ['Android >= 4.0', 'iOS >= 7']      },

      "postcss-pxtorem": 

          "rootValue": 16,    //下面详细解释

          "propList": ['*']

      }

  }

}

rootValue： 代表根元素字体大小或根据input参数返回根元素字体大小

我这里设置16是因为我的项目中之前写的ui都是按2倍图尺寸除2设计的尺寸，如果你是新项目，建议建议设计32，这样UI图是多少，直接用多少，方便开发

propLis：t（ 数组） 接受一个可以从 px 更改为 rem 的属性

3.创建一个rem.js文件，并在main.js引入，用于更改屏幕尺寸改变后更新 html 的font-size属性，

rem.js如下

// 设置 rem 函数

function setRem () {

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

const scale = document.documentElement.clientWidth / 750

// 设置页面根节点字体大小

document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function () {

    setRem()

}

最后 重启项目 如下图配置完成

有疑问欢迎提意见，共同进步。