苏南大叔在本文中,描述一下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物理像素。

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

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

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即可。

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: