微信小程序设置横屏之后原本的rpx单位就不再适用。
rpx:屏幕宽度是固定的 750rpx,也就是说:5rpx == 5 / 750 * 屏幕宽度,竖屏切换成横屏,屏幕宽度就会变大,5rpx也会随即变大。字体也就变大了。
有人说用px解决,没错,的确可以,但不同尺寸,不同分辨率的手机,屏幕的像素也不一样,这就会导致控件的大小在不同手机上的展示会有差异。

那怎么完美解决呢???
了解一下CSS3的单位 vmax,vmin
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmaxvmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
这样来看vmax,vmin也是百分比单位,这里我们使用vmin就能锁定屏幕的短边了!
只要把rpx换算成vmin就能完美解决字体变大的问题!
rpx与vmin的换算关系:
5rpx 等价 calc(5vmin * 100 / 750)==简单写==>>5rpx 等价 calc(5vmin / 7.5)将你的 rpx 都替换按上面套就成了。
拿走请扣6666666














