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

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

苏南大叔:百度智能小程序,如何选择使用长度计量单位? - electron-rpx
百度智能小程序,如何选择使用长度计量单位?(图4-1)

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

rpx

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

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

苏南大叔:百度智能小程序,如何选择使用长度计量单位? - smartapp-rpx
百度智能小程序,如何选择使用长度计量单位?(图4-2)

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

vm

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

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

苏南大叔:百度智能小程序,如何选择使用长度计量单位? - smartapp-vm
百度智能小程序,如何选择使用长度计量单位?(图4-3)

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

苏南大叔:百度智能小程序,如何选择使用长度计量单位? - smartapp-rem
百度智能小程序,如何选择使用长度计量单位?(图4-4)

总结

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

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    smartapp