微信小程序横屏字体变大的完美解决方案

微信小程序设置横屏之后原本的rpx单位就不再适用。

rpx：屏幕宽度是固定的 750rpx，也就是说：5rpx == 5 / 750 * 屏幕宽度，竖屏切换成横屏，屏幕宽度就会变大，5rpx也会随即变大。字体也就变大了。

有人说用px解决，没错，的确可以，但不同尺寸，不同分辨率的手机，屏幕的像素也不一样，这就会导致控件的大小在不同手机上的展示会有差异。

那怎么完美解决呢？？？

了解一下CSS3的单位 vmax，vmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

这样来看vmax，vmin也是百分比单位，这里我们使用vmin就能锁定屏幕的短边了！

只要把rpx换算成vmin就能完美解决字体变大的问题！

rpx与vmin的换算关系：

10rpx 换成 calc(10vmin * 100 / 750)

==简单写==>>

10rpx 换成 calc(10vmin / 7.5)
5px 换成 calc(5vmin / 3.75)

将你的 rpx 和 px 都替换按上面套就成了。

拿走请扣6666666