UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它可以编译到 iOS、Android、以及各种小程序（微信/支付宝/百度/字节跳动/QQ等）等多个平台。为了实现设备自适应，即在各种设备上都能有良好的显示效果，你可以采取以下几种策略：

1. 使用 UniApp 的单位

UniApp 提供了多种单位，如 rpx（responsive pixel），它可以根据屏幕宽度自适应。使用 rpx 可以让布局在不同尺寸的设备上更加灵活和一致。

.example {
  width: 750rpx; /* 相当于设计稿的宽度 */
  height: 100rpx;
}

2. 媒体查询（Media Queries）

虽然 UniApp 主要推荐使用 rpx，但在某些情况下，你可能需要更细粒度的控制，这时可以使用 CSS 媒体查询。

@media screen and (max-width: 599px) {
  .example {
    font-size: 24rpx;
  }
}

@media screen and (min-width: 600px) {
  .example {
    font-size: 28rpx;
  }
}

3. 使用 Flexbox 或 Grid 布局

Flexbox 和 Grid 是现代 CSS 布局技术，它们提供了强大的布局能力，非常适合用于响应式设计。

.container {
  display: flex;
  flex-direction: column; /* 或者 row */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

4. 设置视口（Viewport）元标签

在页面的 中设置视口元标签可以帮助控制页面在移动设备上的显示方式。对于 UniApp，通常不需要手动设置，因为框架已经处理了大部分的视口设置。但是，如果你需要特定的视口行为，可以添加如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

5. 使用动态计算尺寸的函数或组件

在某些复杂场景下，你可能需要根据设备的具体尺寸动态计算某些值。你可以在 Vue 组件中使用计算属性或方法来根据当前设备的宽度动态调整样式。

computed: {
  dynamicWidth() {
    return `${this.deviceWidth / 750 * 100}rpx`; // 假设设计稿宽度为750px
  }
}

6. 使用第三方库或插件

有些第三方库或插件可能提供更高级的自适应解决方案，例如使用 vant-weapp 或 uView 等 UI 框架，它们通常已经包含了针对不同设备的优化。

结论
通过合理使用 UniApp 的内建单位、CSS 媒体查询、Flexbox/Grid 布局以及动态计算尺寸的方法，你可以实现良好的设备自适应。每种方法都有其适用场景，根据具体需求选择合适的方法或组合使用它们。