uni-app 开发工具经常分辨率适配混乱

在开发 uni-app 时，确实可能会遇到分辨率适配混乱的问题。这通常是由于不同设备的屏幕尺寸和像素密度差异所导致的。为了解决这个问题，我们可以利用 uni-app 提供的 rpx 单位和相关的适配方案，以及一些代码技巧来确保应用在不同设备上都能正确显示。

1. 使用 rpx 单位

rpx 是 uni-app 提供的响应式像素单位，可以自动根据屏幕宽度进行缩放。750rpx 宽度的屏幕会等比例缩放到其他宽度的屏幕上。

<view style="width: 750rpx; height: 150rpx;">
  <!-- 内容 -->
</view>

2. 设置 manifest.json 中的适配方案

在 manifest.json 文件中，可以配置应用的窗口表现，其中 designWidth 字段指定了设计稿的宽度，通常为 750。

{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "window": {
        "designWidth": 750
      }
    }
  }
}

3. 使用 CSS 媒体查询

对于需要针对不同屏幕尺寸进行精细适配的场景，可以使用 CSS 媒体查询。

/* 针对宽度小于600rpx的设备 */
@media (max-width: 600rpx) {
  .container {
    font-size: 24rpx;
  }
}

/* 针对宽度大于等于600rpx且小于750rpx的设备 */
@media (min-width: 600rpx) and (max-width: 750rpx) {
  .container {
    font-size: 28rpx;
  }
}

/* 针对宽度大于等于750rpx的设备 */
@media (min-width: 750rpx) {
  .container {
    font-size: 32rpx;
  }
}

4. 自定义适配函数

如果 rpx 和媒体查询仍然不能满足需求，可以编写自定义的适配函数，根据屏幕的宽度动态计算元素的尺寸。

// 获取屏幕宽度
const screenWidth = uni.getSystemInfoSync().screenWidth;

// 设计稿宽度
const designWidth = 750;

// 适配函数
function getAdaptedSize(designSize) {
  return (designSize * screenWidth) / designWidth;
}

// 使用示例
const adaptedWidth = getAdaptedSize(375); // 假设设计稿中的宽度为375px
console.log(adaptedWidth); // 输出屏幕宽度对应的适配值

在组件或页面中，可以通过调用 getAdaptedSize 函数来设置元素的样式。

通过上述方法，我们可以有效地解决 uni-app 开发中遇到的分辨率适配混乱问题。希望这些代码示例能帮助你更好地进行适配工作。