[JavaScript知识库]px 自动转换为 rem：postcss、postcss-pxtorem 插件（项目中）

步骤

webpack 配合 postcss 和 postcss-pxtorem 插件就可以翻译 css 代码，把 px 转 rem 使用

• 下载插件

// 下载 postcss-pxtorem 时，注意版本是否和项目匹配，不然启动报错！！！
yarn add postcss postcss-pxtorem

• 配置 postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

其它

• postcss - 配合 webpack 翻译 css 代码
• postcss-pxtorem - 配合 webpack，自动把 px 转成 rem（利用项目中 flexible.js - 网页宽度改变 - 自动切换 html 的 font-size）详情