最近在了解mpvue框架的时候，对于其能够实现一套代码兼容web和微信小程序（以下简称小程序）的能力十分着迷，虽然小程序的MINA框架有着Vue的影子，但是无可否认的，小程序做了很多有着自己风格的封装，如rpx单位，WXML中的 view, button, text等标签，与web有着较多的差异。
px2rpx-loader作为支持mpvue实现兼容web和小程序的设施之一，有一定值得我们学习的地方。
2.rpx介绍
对于rpx的概念和作用，此处引用微信官方的话说，就是“在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可”。
rpx可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。
rpx的确很好用，大大减轻了开发者对于兼容不同设备的工作量，虽然现在有很多移动端设备兼容的方案，如阿里的flexible，但是小程序中用一个单位就能解决这个恼人的问题，也是极好的。
3.px2rpx-loader的使用
让我们回到实际业务中，假设现在设计师以iphoneX的尺寸为基础，出了一套1125px * 2436px的设计图，并且已经完成了以px单位为基础的web移动端页面的还原，现在需要将已经完成了的页面迁移到小程序中，因此需要解决宽高的转换和单位的转换，我们接下来通过一个测试项目对px2rpx-loader的使用进行介绍。
px2rpx-loader可以依靠webpack来实现，过程如下：
( 1 ) npm install px2rpx-loader // 在目标文件夹中安装loader包
( 2 ) 在webpack.config.js中进行相应配置
{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'px2rpx-loader?rpxUnit=1.5' // px转换为rpx的配置，rpxUnit=1.5为配置参数，后面会介绍 ] }