用uniapp写一个适配多种机型的代码

Uniapp 提供了一些内置的组件和 API，可以很方便地实现多机型适配。

首先，我们可以使用 `@media` 查询来根据不同的屏幕宽度应用不同的样式。例如：

/* 小于 768px 的屏幕宽度 */
@media (max-width: 767px) {
  /* 样式 */
}

/* 768px 到 992px 之间的屏幕宽度 */
@media (min-width: 768px) and (max-width: 992px) {
  /* 样式 */
}

/* 大于 992px 的屏幕宽度 */
@media (min-width: 993px) {
  /* 样式 */
}

然后，我们可以使用 `uni.getSystemInfoSync()` API 来获取设备信息，包括屏幕宽度和高度。例如：

const systemInfo = uni.getSystemInfoSync()
const screenWidth = systemInfo.screenWidth
const screenHeight = systemInfo.screenHeight

通过计算屏幕宽度和高度的比例，我们就可以动态设置组件的宽度和高度，从而实现多机型适配。例如：

<template>
  <view :style="{ width: `${screenWidth / 2}px`, height: `${screenHeight / 2}px` }">
    我的宽度和高度是屏幕宽度和高度的一半
  </view>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0
    }
  },
  onReady() {
    const systemInfo = uni.getSystemInfoSync()
    this.screenWidth = systemInfo.screenWidth
    this.screenHeight = systemInfo.screenHeight
  }
}
</script>

当然，还有很多其他的方法可以实现多机型适配，比如使用 `uni.upx2px()` 将设计稿上的尺寸转换为像素值，或者使用 `flex` 布局等。不同的方法适用于不同的场景，具体可以根据实际情况选择。