Webpack：px2rem

[hubvue]

px2rem

移动端 webapp 场景下，由于需要适配各种大小不同的屏幕，可以采用 rem 方案。rem 是指 html 根节点的 font-size 大小。但是我们平常书写代码习惯使用 px 来写，因此就需要在工程化上将 px 来转换成 rem。

使用px2rem-loader可以在 webpack 构建过程中自动的将 px 转换成 rem。

yarn add px2rem-loader --dev

module.exports = {
  module: {
    rulse: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75,
              remPrecision: 6
            }
          }
        ]
      }
    ]
  }
}

• remUnit 表示单位rem对应多少px
• remPrecision 转成rem之后保留几位小数

除此之外，我们还需要根据手机屏幕的大小来动态的修改 html 节点的 font-size 大小。这里采用手淘的lib-flexible方案。

安装

npm i -S amfe-flexible

在 html 的 head 标签内加入

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<script src="./node_modules/amfe-flexible/index.js"></script>