100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序横屏字体变大的完美解决方案

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

时间:2023-04-04 16:16:37

相关推荐

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

微信小程序设置横屏之后原本的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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。