sass-rpx 微信小程序开发 px -> rpx 转换

微信小程序这个幺蛾子，不仅自己搞了一套所谓 WXSS 的样式表，还创造了一个新的单位 rpx 。

这时候问题就来了，现在的设计稿一般基于 iPhone6（375px × 667px），势必在其他尺寸的手机中有有所不同。在手机浏览器上，为了消除差异，我们可以使用 rem 作为单位，通过改变 html 下的 font-size 来消除在不同尺寸手机上的差异，但是在悉亩微信小程序上只能通过 rpx 来消除。

在使用 sass 时，前辈们已经实现了从 px 转换到 rem 的各种睁仿森轮子，其中比较赞的有 @pierreburel 所编写的 sass-rem 。本文所使用的轮子也是 fork 自 sass-rem 。

基于前辈们大丛的努力，我便重写了 sass-rem ，以适用于 rpx 的场景。

具体项目请参见： sass-rpx

SCSS

CSS

SCSS

CSS

改为rpx的作用：微信底层会根据屏幕宽度自动调整标签中则裤 所设庆敏置的尺寸大小，不用我誉盯枝们过问。

以下图为例，ui给定的头像的宽高为90px：

总结：ui以苹果6或者苹果6plus为模板设计出来的图片，px和rpx都需要做运算处理，规律如上，小程序官方文档建议ui以苹果6模板作图。

我的这篇文章有各种设备的尺寸信息 手机屏幕尺寸、设备信息

小程序开发尺寸是rpx（responsive pixel），可以实现一稿适配所有屏闷搜幕尺寸，小程序编译后，rpx会做一次px换算。换算是以375个物理蚂颤历像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。这里了解就行，设计稿尺寸375px或750px都没问题。在不同的设备下，rpx换算成不同的px，意思就是在开发小程序时，只需要按照标准设计设置好尺寸（洞并多少rpx），小程序会根据对应的设备，计算出应该显示的尺寸（多少px），所以开发时只需要按照标准规则写，就可以适配不同的设备。

---