提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
目录
前言
其实单独使用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实现自适应啦~。