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

Posted 2022-04-15 北方的刀郎

竖屏时候100vmin =  750rpx

1vmin = 7.5rpx

故 1rpx = 1vmin/7.5

也就是 calc(1vmin / 7.5)

5rpx    就是  calc(5vmin/7.5)

-----------------------------------------------------------------------------------------------------------------------------------

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

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

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

 

那怎么完美解决呢？？？

 

了解一下CSS3的单位 vmax，vmin

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

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

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

rpx与vmin的换算关系：

5rpx 等价 calc(5vmin * 100 / 750)==简单写==>>5rpx 等价 calc(5vmin / 7.5)

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