js rem 转px_Webpack之PX转REM

如果你需要开发、维护手机端项目，肯定时常为兼容不同屏幕尺寸的手机效果而费时。

通常我们的设计稿都是绝对单位PX，而最好的兼容效果是使用相对单位REM。我们可以通过px2rem-loader进行单位转换，并使用手淘的lie-flexible库，在页面渲染时来计算根元素的font-size值。

下载依赖

npm install px2rem-loader lie-flexible --save-dev

在webpack的配置中引入

module.exports = {
  // ...
  module: {
    rules: [{
      test: /.less$/,
      use: ['style-loader', 'css-loader', 'less-loader', {
        loader: 'px2rem-loader',
        options: {
          remUni: 75, // 适合750的设计稿 1rem = 75px 
          remPrecision: 8 // px转rem小数点保留的位置
        }
      }]
    }]
  }
}

在项目中引入lie-flexible

<script src="lib-flexible/flexible.js"></script>

lib-flexible应最早执行

这样就可以实现PX到REM单位的自动转化了~