uniapp自动适配 页面在移动端正常显示，在宽屏设备上变为平行视界效果，需要示例代码

可以使用Flex布局来实现页面在不同屏幕大小下的自适应显示。以下是一个基本的示例代码：

<template>
  <div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  background-color: #eee;
  text-align: center;
  padding: 20px;
}
</style>

在上面的代码中，容器使用了flex布局，并设置了`flex-wrap: wrap`来实现多行布局。子元素使用了`width: calc(33.33% - 10px)`来保证三列布局，同时考虑到每个item之间需要有一定的间距，使用了`margin-bottom: 20px`。`justify-content: space-between`用于让每行的item均匀分布在容器中。

这样，在移动设备上，页面会正常显示，而在宽屏设备上，页面会呈现平行视界效果。你可以根据需要调整样式，实现更符合你需求的效果。

相关问题

uniapp自动适配，在移动端正常显示，在宽屏设备上变为平行视界效果，在App.vue设置meta标签，使用Flexible方案进行移动端适配，请写出示例代码

在App.vue中添加以下代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 自适应屏幕宽度
    this.setRemUnit()
    window.addEventListener('resize', this.setRemUnit)
  },
  destroyed() {
    window.removeEventListener('resize', this.setRemUnit)
  },
  methods: {
    setRemUnit() {
      const clientWidth = document.documentElement.clientWidth
      const scale = 375 / 10
      document.documentElement.style.fontSize = (clientWidth / scale) + 'px'
    }
  }
}
</script>

<style lang="scss">
// 定义基准字号
$baseFontSize: 32px;
// 计算rem单位
@function px2rem($px) {
  @return $px / $baseFontSize + rem;
}

// 定义样式
body {
  font-size: $baseFontSize;
}
</style>

在上面的代码中，我们定义了一个 `setRemUnit` 方法，该方法会根据屏幕宽度计算出合适的 `font-size` 值，并将其设置到 html 标签上，从而实现自适应。同时，我们在样式中定义了一个基准字号 `$baseFontSize`，并提供了一个 `px2rem` 函数，用于将像素值转换成 rem 单位。

需要注意的是，我们使用了 Flexible 方案进行移动端适配，而不是直接设置 viewport。这是因为如果直接设置 viewport，虽然可以实现自适应，但是在宽屏设备上会出现拉伸变形的问题，而 Flexible 方案可以避免这个问题。

uniapp自动适配，移动端页面正常显示正常跳转 宽屏设备页面效果变为平行视窗效果，母页面在左，子页面在右

要实现在宽屏设备上页面效果变为平行视窗效果，可以使用响应式布局和媒体查询来实现。以下是一个简单的示例：

1. 在页面头部添加以下代码，使页面响应式布局：

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

2. 在页面中添加一个类似以下的样式，当屏幕宽度大于某个阈值时，设置母页面和子页面的宽度为50%：

@media screen and (min-width: 768px) {
  .wrapper {
    display: flex;
  }
  .parent, .child {
    width: 50%;
  }
}

3. 在HTML中添加母页面和子页面的容器，并添加相应的类名：

<div class="wrapper">
  <div class="parent">
    <!-- 母页面内容 -->
  </div>
  <div class="child">
    <!-- 子页面内容 -->
  </div>
</div>

这样，在宽屏设备上，母页面和子页面将会并排显示，而在移动端则会正常显示和跳转。