请写一个屏幕自适应的vue3实例，要求内容多一些

在Vue3中，为了实现屏幕自适应的设计，我们通常会利用响应式布局，如使用Flexbox或Grid，以及媒体查询（Media Queries）来处理不同设备下的显示。以下是一个简单的Vue组件实例，它包含一个卡片列表，并能根据屏幕大小调整布局：

<template>
  <div class="container" :class="{ 'responsive': isResponsive }">
    <transition-group tag="div" name="list-items">
      <div v-for="(item, index) in items" :key="index" class="card">
        <div class="card-header">Card {{ index + 1 }}</div>
        <div class="card-body">{{ item.content }}</div>
        <div class="card-footer">
          <button @click="handleResize">Toggle Responsive</button>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const isResponsive = ref(false);
let items = [
  { content: 'Item 1' },
  { content: 'Item 2' },
  { content: 'Item 3' }
];

onMounted(() => {
  // 模拟在窗口尺寸变化时更新isResponsive
  window.addEventListener('resize', () => {
    isResponsive.value = window.innerWidth <= 600; // 当宽度小于等于600px时，设置为响应式
  });
});

function handleResize() {
  isResponsive.value = !isResponsive.value;
}
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: calc(50% - 20px); /* 如果有15px的间距 */
  margin: 10px;
}

@media (max-width: 600px) {
  .responsive .card {
    width: 100%;
  }
}
</style>

<!-- 这里使用了名为"list-items"的CSS动画过渡效果 -->
<style>
@keyframes list-items-enter-active,
.list-items-leave-active {
  transition: all 0.5s ease-in-out;
}

.list-items-enter,
.list-items-leave-to {
  opacity: 0;
  transform: translateY(-1rem);
}
</style>