postcss-pxtorem 插件自动转换 rem 单位

px 自动转换 rem 单位

• 安装 postcss-pxtorem 与 lib-flexible

  $ npm install postcss-pxtorem lib-flexible --save-dev
  

• 使用 postcss-pxtorem 插件来自动转换代码中的 px 单位为 rem 单位

  • 在项目根目录下创建一个 postcss.config.js 文件，书写如下配置

  module.exports = {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5,   // 设置页面根元素字体大小，一般默认就好
        propList: ['*']
      }
    }
  }
  

• 使用 lib-flexible 插件根据屏幕大小自动设置 html 元素的 font-size

  // 在 main.js 中引入
  import 'lib-flexible'
  
  // 或者 需要修改 lib-flexible 中的 index.js 可以去 github 中下载该文件到项目中再引入
  

• 这两款 插件在 vant 库中可以找到使用方法，链接