px vs rpx 及在小程序中自动转化

px

px 全称pixel，也称为 CSS 像素，是绝对大小。基本上所有Web开发者都使用过px。
例如chrome调试设备选择iPhone6/7/8时显示的就是375px * 667px：

image.png

rpx

rpx全称叫responsive pixel，最初是由微信小程序推出的单位，可以根据屏幕宽度进行自适应。
规定：不论屏幕大小，在小程序上屏幕宽度都是750rpx。

举个🌰：
在 iPhone6 上，屏幕宽度为375px，共有750个物理像素(rpx)，所以两者的换算关系如下：

      750rpx = 375px 
=>    1rpx = 0.5px
=>    1px = 2rpx

设计师一般都是按屏幕宽度375px来出设计稿，而我们在小程序中需要转成rpx来自适应屏幕宽度。

区别

1. px是绝对大小，但是在响应式页面开发比较无力。所以在移动端开发中我们常搭配rem, vw等单位；
2. rpx可以自适应手机分辨率，适配当前机型，在小程序中推荐使用rpx像素单位进行开发；

举个🌰：
在抖音小程序，书写如下css代码：

.content {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 70rpx;
  position: relative;
  background-color: #090e14;
}

在字节开发者工具上显示的是对应机型转化后的px：

image.png

结果是在不同机型上rpx会自适应。

把70rpx改成35px：

.content {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 35px;
  position: relative;
  background-color: #090e14;
}

image.png

结果是在不同机型上px都一致。

自动转化

从上文我们知道在小程序中1px === 2rpx ，而设计稿上的单位是px，如果每次写css都要把px值手动✖️2的话，无疑会加重开发者的心智负担。

这项计算工作完全可以交由插件来完成，例如可以写一个postcss插件来转换css。实际上，市面上已经有这种单位转换的postcss插件 postcss-pxtorpx-pro。

postcss-pxtorpx-pro这个插件是从<u>postcss-pxtorem</u>上改造出来的，核心的代码基本没有变动：

image.png

实际上只有replace的替换函数有所改动：单位从rem改成rpx，转换关系从 pixels / rootValue 改成 px => 2 * px 。

代码里的pxRegex是一个正则：

// Not anything inside double quotes
// Not anything inside single quotes
// Not anything inside url()
// Any digit followed by px
// !singlequotes|!doublequotes|!url()|pixelunit

module.exports = /"[^"]+"|'[^']+'|url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;

借助正则可视化工具查看该正则，主要是匹配px前的数字

image.png

验证pxtorpx是否正确可行

从代码的逻辑来看，方案是可行的。

AST Explorer 验证

选择css的AST语法：

image.png

选择postcss插件：

image.png

切换Transform为true：

image.png
接下来就可以在左下方写postcss插件：
image.png

上面我把pxtorpx的代码简化了一下，右下角成功把px转成2rpx。

业务接入验证

插件接入过程省略。。。

还是这段css代码：

.content {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 35px;
  position: relative;
  background-color: #090e14;
}

在各机型上转化后的结果如下：

image.png

结果跟直接使用rpx完全一致！

总结

很多项目涉及到的场景都可以用插件来简化我们的开发过程，不得不说webpack的生态就是强👍🏻。