uniapp rpx在超过960时样式错位的问题，uniapp兼容ipad平板配置

Sunny

已于 2023-03-09 18:13:52 修改

阅读量2.4k

点赞数

文章标签： uni-app javascript 前端

于 2023-03-09 17:43:30 首次发布

本文链接：https://blog.csdn.net/L_C_sunny/article/details/129427630

版权

文章讨论了在移动设备上使用rpx作为单位进行设计还原的优点，但指出在PC或Pad等大屏幕设备上可能造成显示问题。为了解决这个问题，uni-app提供了在pages.json中配置rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth的方法，允许开发者调整以适应不同屏幕宽度。通过这些参数的设置，可以避免在宽屏设备上界面显示过大的问题。

摘要由CSDN通过智能技术生成

“这里需要对rpx的使用特别强调一下。
在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。
但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。”

并且提示在 pages.json 的 globeStyle 里配置 rpx 的如下参数：
在这里插入图片描述

在这里插入图片描述

 "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "app_plus": {
            "app-plus": {
                "bounce": "none"
            }
        },
        "pageOrientation": "landscape",
        "rpxCalcMaxDeviceWidth": 0, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
         "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
         "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750

    },

当然uni-app官网，后面也有说明：“通过上述配置中的前2个，即rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth，即可有效解决使用了rpx后，在宽屏下界面变的奇大无比的问题。如果你不需要特别定义这2个参数的数值，则无需在pages.json中配置它们，保持默认的960和375即可。”

具体还是要根据实际情况通过调整rpxCalcMaxDeviceWidth和rpxCalcBaseDeviceWidth的值来适配屏幕宽度。