Uniapp X 宽屏适配方案

在 Uniapp X 中实现宽屏适配（如平板、折叠屏、PC 端），可通过以下方案灵活应对不同屏幕尺寸：

---

1. 响应式布局

使用 CSS 媒体查询动态调整样式：

/* 通用样式 */
.container {
  padding: 20rpx;
}

/* 宽屏适配 (屏幕宽度 ≥ 768px) */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto; /* 居中显示 */
    display: grid;
    grid-template-columns: 250px 1fr; /* 分栏布局 */
  }
}

---

2. 动态计算布局

在 Vue 组件中通过 uni.getSystemInfoSync() 获取屏幕信息：

<script>
export default {
  data() {
    return {
      isWideScreen: false
    }
  },
  mounted() {
    const { windowWidth } = uni.getSystemInfoSync()
    this.isWideScreen = windowWidth > 768 // 设置宽屏阈值
  }
}
</script>

<template>
  <view :class="['layout', isWideScreen ? 'wide-layout' : 'narrow-layout']">
    <!-- 内容区域 -->
  </view>
</template>

<style>
.wide-layout {
  display: flex;
  flex-direction: row;
}
.narrow-layout {
  display: flex;
  flex-direction: column;
}
</style>

---

3. rpx 自适应单位

利用 Uniapp 的 rpx 单位实现等比缩放：

.element {
  width: 750rpx; /* 满屏宽度 */
  padding: 20rpx; /* 自适应间距 */
  font-size: 32rpx; /* 自适应字体 */
}

换算规则：设计稿按 750px 宽度时，1px = 1rpx

---

4. 分栏布局优化

宽屏下采用多栏展示（如左导航+右内容）：

<template>
  <view class="container">
    <view v-if="isWideScreen" class="sidebar">
      <!-- 侧边导航 -->
    </view>
    <view class="main-content">
      <!-- 主要内容 -->
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
}
.sidebar {
  width: 200px;
  flex-shrink: 0;
}
.main-content {
  flex: 1;
}
</style>

---

5. 组件级适配

使用 match-media 组件实现条件渲染：

<template>
  <match-media :min-width="768">
    <wide-screen-component v-if="matches" />
    <narrow-screen-component v-else />
  </match-media>
</template>

---

6. 折叠屏特殊处理

针对折叠屏设备监听屏幕变化：

// 监听屏幕折叠状态变化
uni.onWindowResize((res) => {
  console.log('新窗口尺寸:', res.size)
  // 动态更新布局
})

---

最佳实践建议

1. 阈值选择

   • 手机竖屏：< 600px
   • 平板/折叠屏：600px - 1200px
   • PC 大屏：> 1200px

2. 设计原则

   • 移动优先：先设计手机布局，再扩展宽屏
   • 内容重组：宽屏下展示补充信息（如相关推荐）
   • 功能扩展：宽屏增加快捷操作区

3. 测试工具
   使用 Chrome 开发者工具模拟不同设备：

   Devices > iPad > Responsive (1200x800)
   

通过组合使用这些方案，可实现在手机、平板、折叠屏、PC 等多种设备上的优雅适配。