vue cli项目px转换成rem(包括大屏适配)

一. vue cli px ==> rem

1 安装计算工具和转换工具

npm install lib-flexible --save-dev 
npm install postcss-pxtorem --save-dev  

2 在 main.js 中引入 lib-flexible

import 'lib-flexible'

3 配置 package.json
postcss-pxtorem
参数文档 具体有啥要求可以去参数文档查看 如不想让element 和vant组件转换成rem 保留px增加selectorBlackList内容

"postcss-pxtorem": {
    "rootValue": 37.5,// 以设计稿 375 为例， 375 / 10 = 37.5   //vant 组件就是37.5的计算 若是用vant 开发移动端最好设计和使用 375的宽度
    "selectorBlackList": [
      "el-","van"
    ],
    "propList": [
      "*"
    ]

}

二.大屏的适配大屏计算

上面的一套也可以使用 只要去更改 lib-flexible即可
文件位置：

./node_modules/lib-flexible/flexible.js

源码：

function refreshRem(){
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540) {
      width = 540 * dpr;
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}
//更改为
function refreshRem(){
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr < 1920) {
      width = 1920* dpr;
  } else if (width / dpr > 5760) {
      width = 5760 * dpr;  // 5760是你需要适配的宽度  稍微更改下这点的if else 换成你需要适配的尺寸
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}