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设计 此处就为192unitPrecision: 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;
}