在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示

在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示。以下是一些多场景下的使用案例：

场景1：使用百分比宽度进行适配

使用百分比宽度可以让元素的宽度随屏幕宽度变化而变化，适用于大多数容器。

<template>
  <div class="container">
    <div class="item" v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<style>
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 49%; /* 双列显示 */
  margin: 0.5%;
  box-sizing: border-box;
}
</style>

场景2：使用flex布局进行适配

flex布局可以提供更加灵活的空间分配。

<template>
  <div class="flex-container">
    <div class="flex-item" v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px; /* 根据需求调整 */
  margin: 10px;
}
</style>

场景3：使用媒体查询进行适配

使用CSS媒体查询根据不同屏幕尺寸应用不同的样式。

<style>
/* 基础样式 */
.item {
  width: 100%;
  margin-bottom: 10px;
}

/* 屏幕宽度小于600px时的样式 */
@media (max-width: 600px) {
  .item {
    font-size: 14px; /* 移动端字体缩小 */
  }
}

/* 屏幕宽度大于600px时的样式 */
@media (min-width: 601px) {
  .item {
    font-size: 16px; /* PC端字体正常 */
  }
}
</style>

场景4：使用Vue的v-show和v-if进行条件渲染

根据不同屏幕尺寸渲染不同内容。

<template>
  <div>
    <div v-show="isMobile" class="mobile-content">
      <!-- 移动端内容 -->
    </div>
    <div v-show="!isMobile" class="desktop-content">
      <!-- PC端内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    this.isMobile = window.innerWidth < 600;
    window.addEventListener('resize', () => {
      this.isMobile = window.innerWidth < 600;
    });
  }
};
</script>

场景5：使用uni-app的栅格系统

uni-app提供了24列的栅格系统，适用于创建响应式布局。

<template>
  <view class="row">
    <view class="col-8">
      <!-- 占8列的内容 -->
    </view>
    <view class="col-16">
      <!-- 占16列的内容 -->
    </view>
  </view>
</template>

<style>
.row {
  display: flex;
}
.col-8, .col-16 {
  padding: 10px;
  box-sizing: border-box;
}
</style>

场景6：使用@apply进行样式复用

在uni-app中使用@apply指令可以复用样式，减少代码重复。

<style>
@apply .common-style {
  font-size: 16px;
  color: #333;
}

.item {
  @apply .common-style;
  background-color: #f9f9f9;
}
</style>

注意事项

• 确保在不同设备和屏幕尺寸上测试页面布局。
• 使用px和rpx单位时要注意它们的区别，px是像素单位，而rpx是响应式单位。
• 利用uni-app的API获取屏幕信息，如uni.getSystemInfoSync()，以便进行更精确的适配。

通过上述案例，你可以看到uni-app在不同场景下进行单位转换和页面适配的方法，这些方法可以帮助你根据不同的屏幕尺寸提供最佳的用户体验。