postcss-pxtorem实现页面自适应
1.安装postcss-pxtorem
npm install postcss-pxtorem --save-dev
2. postcss.config.js文件配置举例A
//postcss.config.cjs
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
unitPrecision: 6, // 计算结果保留 6 位小数
selectorBlackList: [".no-rem", "no-rem", "#loader", ".el-time-spinner__item"], // 要忽略的选择器并保留为px。
propList: ["*"], // 可以从px更改为rem的属性 感叹号开头的不转换
replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
mediaQuery: true, // 允许在媒体查询中转换px。
minPixelValue: 2 // 设置要替换的最小像素值。
}
}
};
举例B
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0,
},
},
};
在这个配置中，我们主要关注几个核心选项：
rootValue：根元素字体大小，用于将像素转换为rem的基准值。unitPrecision：rem的小数位数。propList：需要转换的属性列表，['*']表示所有属性都会被转换。selectorBlackList：需要忽略的选择器，可以是正则表达式或字符串。replace：是否替换原始值。mediaQuery：是否在媒体查询中转换px。minPixelValue：小于或等于该值的像素单位不被转换。
3. 举例A 的实际应用
/* 输入样式 */
div {
height: 30px !important;
width: 100px;
font-size: 18px;
}
/* 输出样式 */
div {
height: 0.15625rem !important;
width: 0.520833rem;
font-size: 0.09375rem;
}