uniapp基准宽度

uniapp基准宽度的概念

在uniapp中，基准宽度通常指设计稿的参考宽度，用于实现多端适配。默认情况下，uniapp以750rpx作为设计稿基准宽度（即1rpx=1设计稿单位），这一设定与微信小程序的规范一致。

基准宽度的作用

750rpx的基准宽度能够将设计稿中的像素尺寸直接转换为rpx单位。例如设计稿上某元素宽度为375px，在代码中写为375rpx即可自动适配不同屏幕。

rpx（responsive pixel）是一种响应式单位，可根据屏幕宽度动态调整实际渲染像素。在750rpx基准下：

• 屏幕总宽度为750rpx时，1rpx=1物理像素
• 其他屏幕宽度下按比例缩放

修改基准宽度的方法

如需修改默认的750rpx基准，可通过以下配置实现：

1. 在pages.json中全局配置：

   

   {
   "globalStyle": {
    "rpxCalcMaxDeviceWidth": 1080, // 最大设备宽度（单位px）
    "rpxCalcBaseWidth": 1080,      // 设计稿基准宽度（单位px）
    "rpxCalcIncludeWidth": 750     // 包含的最小宽度（单位px）
   }
   }

2. 通过SCSS变量覆盖（需安装sass插件）：

   /* uni.scss */
   $uni-width: 1080px; // 修改为自定义基准宽度

多端适配注意事项

• H5端：默认使用rem适配，可通过uni-app配置文件调整px转rem的比率。
• 小程序端：直接遵循750rpx规范，无需额外配置。
• APP端：自动根据设备像素密度进行换算，保持与其他平台一致的视觉效果。

实际应用示例

若设计稿宽度为1080px，希望1rpx对应1设计稿像素：

1. 设置rpxCalcBaseWidth为1080
2. 代码中直接使用设计稿尺寸值（如1080rpx表示满屏宽度）
3. 运行时框架会自动按屏幕实际宽度缩放

// 获取屏幕宽度的rpx值
const systemInfo = uni.getSystemInfoSync()
const screenWidthInRpx = 750 * systemInfo.windowWidth / systemInfo.screenWidth

通过合理设置基准宽度和灵活使用rpx单位，可实现跨平台的高保真界面还原。