微信小程序横屏开发中的单位设置

3,251 阅读2分钟

最近在做小程序横屏开发,想记录下自己的学习过程。第一次写文章,望各位大牛指点一二。

从小程序基础库版本 2.5.0 开始, pageOrientation 还可以被设置为 landscape ,表示固定为横屏显示,有许多小程序开发人员也开始了真横屏的开发。

我们知道微信小程序提供了以rpx为单位的适配方案,但是如果在开发横屏小程序中直接使用rpx作为单位,且大小依据设计图的大小进行开发你会发现实际呈现的效果和设计图相差甚远。因为1rpx大小是相对屏幕的宽度变化的,当横屏开发时,屏幕的宽度变成了竖屏时的高度,也就是将近放大了两倍。

1rpx == 1 / 750 * 屏幕宽度

屏幕的宽度变化导致了1rpx实际大小和我们预期大小的不同,这个时候我们就会想如果把屏幕宽度固定为竖屏时的宽度,也就是参考边锁定,那不管它怎么横竖屏切换都能保证1rpx的实际大小不变?

要想锁定一条边不变就得了解css3单位中的vmin和vmax:

vmax: 通俗的讲就是将宽、高中的最长边均分成100单位的vmax,1vmax就是最长边的1%。
vmin: 通俗的讲就是将宽、高中的最短边均分成100单位的vmin,1vmin就是最短边的1%。

而我们要锁定的是最短的那条边,所以我们把单位换成vmin就可以完美解决这个问题了。当然有人会说vw和vh也能锁定一条边,理论上来说是可行的,但是在实战中小程序的宽高判定存在一定问题,所以更稳妥的方法就是两个值进行一次大小比较,相较这样还不如直接用vmin代替了。

rpx与vmin的换算关系

1vmin = 100vmin / 750rpx
5rpx = 5 * 100 / 750

如果每次使用都要转换成对应的vmin就会很麻烦,新的黑科技calc就出现了

这样子是不是就方便了很多呢,只要按照设计图的大小写入就行了,但是很多人又觉得写入这么一大串很麻烦,毕竟程序员都是比较追求极致的生物(能有多懒就多懒)。在这小编强烈推荐用vscode写小程序代码,你可以在vscode中设置代码片段,通过代码片段快速开发。

vscode中代码片段的设置

下图是我设置的代码片段

最后

轻喷。。。。。。。。。。。。。。