postcss可以被理解为一个平台,可以让一些插件在上面跑。它提供了一个解析器,可以将CSS解析成抽象语法树。通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer
之前使用rem适配的思路:使用媒体查询,确定不同屏幕下html标签的font-size (即1rem单位),然后在写css样式的时候,就可以使用1rem , 2rem这样的单位来做适配了。
但是这种适配的问题是需要手动把px单位换算成rem单位,比较麻烦。对应的,我们可以使用flexible和 postcss-px2rem来解决这个问题
//1.安装flexible。 flexible主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题
npm install lib-flexible --save
//2.main.js引入flexible
import 'lib-flexible'
//此时运行程序会看到html中自动加上了font-size font-size的默认值为viewport的十分之一
//在页面中引入flexible.js后,flexible会在<html>标签上增加一个data-dpr属性和font-size样式(如下图)。
//1.安装postcss-pxtorem
npm install postcss-pxtorem --save-dev
//2.修改postcss.config.js
module.exports = {
plugins: {
//autoprefixer 自动补全css前缀的东西
'autoprefixer': {
},
'postcss-pxtorem': {
rootValue: 37.5, //换算基数,一般和html的font-size一致
propList: ['*'] //哪些css属性需要换算
}
}
};
这里的postcss.connfig.js需要自己手动添加并且配置