vue脚手架rem适配方案,postcss-pxtorem

最近开发了一个移动端项目，由感而发，将自己所理解到的东西都记录下来，希望与大家一起共勉。

在这里就不具体说明rem了，在网上可以很容易的找到答案~

postcss-pxtorem的适配方案虽然在网上也能找到许多，但有些也说的不够清楚，也可能是自己理解能力较差的缘故吧，有费了一些时间，所以在此特意总结一下自己的理解，希望对新手朋友们有一定的帮助，要是大佬看见了也可以给小弟多提提建议，谢谢大家了~~！

安装 postcss-pxtorem

npm install postcss-pxtorem -D

设置规则(vue.config.js) --- vue-cli3

项目中没有就在根目录新建一个，该文件在根目录上时会自动被CLI Service识别。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 32, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: ['*'],  //要转换的匹配项
          })
        ]
      }
    }
  }
}

给html根元素一个font-size

在src目录下新建lib文件夹，并新建rem.js。

// rem.js
// 基准大小
const baseSize = 32;
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const width = document.documentElement.clientWidth || document.body.clientWidth;
  const scale = width <= 640 ? width/750 : 640/750;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

将新建的rem.js导入main.js

// main.js
import './lib/rem'

再重刷一下页面，项目中的px单位就转换为rem单位了。
还没完，这时候你会发现，所有的px单位都转换为rem，有时候我们又不需要rem。

在这儿，最简单的方法，将项目中不需要转换的px全部换为大写PX或者首字母大写Px，这样就解决了。

结语

在vue.config.js也可以对转换项匹配，目前我还没适配出来，望大佬指点一二~！