uniapp rpx在超过960时样式错位的问题
到uni-app官网查一下,发现有下面这样一段话:
“这里需要对rpx的使用特别强调一下。
在移动设备上也有很多屏幕宽度,设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于,各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,尽可能的还原了设计师的设计。
但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。”
并且提示在 pages.json 的 globeStyle 里配置 rpx 的如下参数:
{ "globalStyle": { "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750 }, }
但是你会发现加了以后然并卵,后来把rpxCalcMaxDeviceWidth设为0后竟然可以了。
当然uni-app官网,后面也有说明:“通过上述配置中的前2个,即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth,即可有效解决使用了rpx后,在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值,则无需在pages.json中配置它们,保持默认的960和375即可。”
具体还是要根据实际情况通过调整rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth的值来适配屏幕宽度。
参考:关于uni-app使用rpx在iPad上出现字体等样式不兼容问题 - (App Store/公众号/小程序:分享录) (xubingtao.cn) ; (4条消息) uni-app rpx适配大屏时失真_风花一世月的博客-CSDN博客 ;(4条消息) uniapp 解决 h5 PC端 屏幕过大失真 问题_HHH 917的博客-CSDN博客