微信小程序设置横屏之后原本的rpx单位就不再适用。
rpx：屏幕宽度是固定的 750rpx，也就是说：，竖屏切换成横屏，屏幕宽度就会变大，5rpx也会随即变大。字体也就变大了。
有人说用px解决，没错，的确可以，但不同尺寸，不同分辨率的手机，屏幕的像素也不一样，这就会导致控件的大小在不同手机上的展示会有差异。
image.png
那怎么完美解决呢？？？
了解一下CSS3的单位 vmax，vmin
相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
这样来看
也是百分比单位，这里我们使用vmin就能锁定屏幕的短边了！
只要把rpx换算成vmin就能完美解决字体变大的问题！
rpx与vmin的换算关系：
10rpx 换成 calc(10vmin * 100 / 750)
==简单写==>>
10rpx 换成 calc(10vmin / 7.5)
5px 换成 calc(5vmin / 3.75)
将你的 rpx 和 px 都替换按上面套就成了。
网友评论