pxtorem适配详细教程

通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作
而不需要再手动计算

实现方式

• postcss-pxtorem：将px转换为px
• amfe-flexible：为html、body添加font-size，窗口调整时候重新设置font-size

安装与使用

• 安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

注：如果报错，则需要指定postcss-pxtorem版本，如： npm install postcss-pxtorem@5.1.1 --save-dev

• 使用

1. 在main.js入口文件引入

import 'amfe-flexible'

2. 创建postcss.config.js配置文件

module.exports = () => ({
  plugins: [
  	// autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器
    require('autoprefixer')({
      overrideBrowserslist: [
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
    }),
    require('postcss-pxtorem')({
      rootValue: 192.0, //设计稿元素尺寸/10，这里设计稿宽度为1920
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 3, //保留rem小数点多少位
      selectorBlackList: [],//则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true,
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      // minPixelValue: 3, //px小于3的不会被转换
    })
  ]
});

处理报错问题

• Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

缺少相应的插件（安装包） postcss 和 postcss-loader，安装这两个插件即可；

• postcss-loader@5.2.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.

降低 postcss-pxtorem 的版本，删除已有的postcss-pxtorem版本，安装指定版本
npm i postcss-pxtorem@5.1.1 --save-dev

• 如果需要less-loader，碰到 Syntax Error: TypeError: this.getOptions is not a function

less-loader 、postcss-loader的版本要相互匹配，版本相差不能太大，
建议安装的版本分别为less-loader 7.0.1, postcss-loader 4.0.4 。

可正常运行版本参考