在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件
1. 安装:npm i postcss-px2rem --save -dev
2.根目录下新建postcss.config.js(注:之前使用的 .postcssrc.js 已经被抛弃)
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ['*'], // Use wildcard * to enable all properties
selectorBlackList: ['.norem'], // ignore and leave as px
exclude: /node_modules/
}
}
};
remUnit: 37.5 代表 1rem = 37.5px; 所以当你一个75px值时,它会自动转成 (75px/37.5)rem,
转化完之后,你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的
html {
font-size: 10vw;
}
这样的话我们设置的px值 就变成对应的 10%的屏幕宽度 *(75px/75)rem ,当然你也可以根据屏幕宽度来动态配置html的font-size
3.如果你的项目使用vue-cl