百度智能小程序，如何选择使用长度计量单位？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔在本文中，描述一下css中的长度计量单位。常规的网页中，使用的单位是px，自适应网页一般使用单位rem，但是还存在着一些较为罕见的计量单位，比如：vm、vh。那么在小程序开发过程中，推荐使用的计量单位是什么呢？这就是本文中，苏南大叔要讨论的问题。

本文测试环境：mac、百度开发者工具@2.4.3。

rpx

在智能小程序的代码中，使用的计量单位是个新的单位rpx。对于开发者来说，1rpx就可以认为是1px。这样的话，开发者就方便开发了。但是，实际上1rpx并不是和1px等同的。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

小程序宽度100%，就相当于750rpx。而且一般来说，智能小程序的设计稿都是按着750px来设计的。

vm

如果您打开百度开发者工具的f12的话，就可以有些惊讶的发现：css的单位是vm和vh，并不是在代码中所书写的rpx单位。所以，从rpx到vm，还有一个转化的过程。具体参见下图，具体的转化关系，因为是系统自动完成的。这里，苏南大叔就不做细究了。

通过开发者工具的f12可以看到，750rpx相当于100vm。而rpx到vh的转化，目前苏南大叔还没有看到，不过不排除存在这种变化。

rem

因为涉及到了一个自适应的问题，这里的rem长度单位也是可以使用的，具体的可以参见百度智能小程序的官方demo。而大家都清楚，rem是以根的font-size为基础的，有对应关系。那么，在智能小程序中，宽度是20rem，同时，宽度还是750rpx。对于程序猿来说，1rpx可以理解为1px,1px可以认为是0.0266rem。

rem（root em）: 规定屏幕宽度为20rem，1rem = (750/20)rpx。

但是，rem这个单位，对于开发者工具里面的css来说，编译完成还是rem，并不会变成vm。

总结

百度智能小程序的单位是rpx，而微信小程序的单位也是rpx。两者的长度单位其实是一致的。总结上来说，智能小程序的屏幕宽度是750rpx/100vm/20rem。对于从设计图到html的切图仔来说，页面宽度认为是750px即可。

更多智能小程序相关文章，请点击苏南大叔的博客：

• https://newsn.net/tag/smartapp/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。