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来自适应屏幕宽度。
区别
- px是绝对大小，但是在响应式页面开发比较无力。所以在移动端开发中我们常搭配rem, vw等单位；
- 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的生态就是强👍🏻。
网友评论