vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem

本文主要介绍如何在Vue-cli3.0项目中使用px2rem或者postcss-plugin-px2rem进行自适应布局的开发。文章结构包括以下几个部分：

1. px2rem 与 postcss-plugin-px2rem 的介绍

2. 使用px2rem进行自适应布局

3. 使用postcss-plugin-px2rem进行自适应布局

4. 总结

1. px2rem 与 postcss-plugin-px2rem 的介绍

在移动端开发中，为了适应不同设备的屏幕大小，我们需要将设计图上的px值转换成rem值进行开发。px2rem是一个轻量的JS库，可以将px转换成rem，从而实现自适应布局。而postcss-plugin-px2rem是一个使用PostCSS插件实现同样效果的方法。

2. 使用px2rem进行自适应布局

首先安装px2rem：

npm install px2rem -S

然后在webpack配置中添加loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75 // 设计稿宽度/10，如设计稿宽度为750px，则需要写75
            }
          }
        ]
      }
    ]
  }
}

这样就可以在css中直接使用px，被转换为rem。例如：

.selector {
  font-size: 24px; /* 在iPhone6上会转换成0.32rem */
}

另外，如果有某些特定的元素（如1px边框）需要使用px单位，可以通过以下方式进行设置：

.selector {
  border: 1px solid #ccc; /* 在iPhone6上会转换为0.0133rem，变成不可见状态 */
  border-width: 0.01rem; /* 手动设置为1px，解决问题 */
}

3. 使用postcss-plugin-px2rem进行自适应布局

首先安装postcss-plugin-px2rem：

npm install postcss-plugin-px2rem -S

然后在postcss.config.js中添加插件：

module.exports = {
  plugins: [
    require('postcss-plugin-px2rem')({
      rootValue: 75, // 设计稿宽度/10，如设计稿宽度为750px，则需要写75
      exclude: /(node_module)/,
      minPixelValue: 2 // 所有小于2px的样式都不被转换
    })
  ]
}

这样就可以在css中直接使用px，被转换为rem。例如：

.selector {
  font-size: 24px; /* 在iPhone6上会转换成0.32rem */
}

4. 总结

使用px2rem或者postcss-plugin-px2rem可以让我们在移动端开发中实现自适应布局。两者的使用方式略有不同，但都可以实现同样的效果。在实际开发中，重点考虑性能和便捷性，选择适合自己的方法就可以了。