elementUI中的手机宽度自适应

提醒：和el-col :span="24 的span不冲突

代码：

<template>
  <el-row :gutter="20">
    <el-col
      :span="6"   <!-- 默认每行占据6列（即一行最多4个） -->
      :xs="24"    <!-- 超小屏幕时每行1个 -->
      :sm="12"    <!-- 小屏幕时每行2个 -->
      :md="12"    <!-- 中等屏幕时每行2个 -->
      :lg="6"     <!-- 大屏幕时每行4个 -->
      :xl="6"     <!-- 超大屏幕时每行4个 -->
      v-for="item in 4"
      :key="item"
    >
      <el-card>
        <div slot="header">Item {{ item }}</div>
        <p>内容区域</p>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
</script>