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;
}