vue中使用lib-flexible和postcss-pxtorem实现自适应

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、lib-flexible安装及引入

二、postcss-pxtorem安装及配置

总结

---

---

前言

其实单独使用lib-flexible也可以实现自适应效果，只是下载依赖后要重新去修改flexible源码（那岂不是每次下载后都要修改源码，此举虽然简单，但却是很烦。。。。），为了解决这个问题，结合postcss-pxtorem来实现px转rem。

---

一、lib-flexible安装及引入

npm i lib-flexible --save

在main.js中引入

import 'lib-flexible' //自适应

如果宝子你任性，非要只用这个，那我还是得惯着你~

记得去依赖包里面找到这个文件修改一下哟~

 

二、postcss-pxtorem安装及配置

宝子们，答应我一定要安装这个版本，不然要报错~

npm install postcss-pxtorem@5.1.1

然后在找到根目录下得.postcssrc.js

 配置根字体

//px转化成rem得配置
module.exports = {
  "plugins": {
    'postcss-pxtorem': {
      rootValue: 16, //1rem = 16px
      minPixelValue: 2, //可以被替换的最小像素
      // unitPrecision(Number) //rem单位的小数位数上限.,
      propList: ['*']//所有属性做单位转化,
      
    }
  }
}

---

总结

以上就是今天要讲的内容，本章就使用postcss-pxtorem和lib-flexible实现自适应啦~。