前端实现响应式以及类似响应式的效果

m0_73419038

已于 2024-03-23 12:11:55 修改

阅读量424

点赞数 9

文章标签：前端 vue.js javascript

于 2024-03-22 12:41:56 首次发布

本文链接：https://blog.csdn.net/m0_73419038/article/details/136937281

版权

本文介绍了如何使用CSS媒体查询、Flex布局以及ElementPlus库中的el-row和el-col组件来创建响应式活动卡片设计，展示了如何根据不同屏幕尺寸动态调整卡片数量和宽度，以实现类似小米官方的卡片效果。

摘要由CSDN通过智能技术生成

背景：

我需要说明一下，我说的响应式类似于小米官方的卡片效果，电脑端是4个，随着宽度的减小卡片的个数而变少。

这里是宽度大的情况：

这里是宽度小的情况：

1、使用css原生的@media

这个不用多说，直接使用@media媒体响应就行了需要自己设计，主要是设计一个最小的高和宽，不然的话容易出现样式消失。

2、使用flex布局

直接给代码，主要是看css布局。

.activity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.activity-card {
  flex: 1 0 300px;
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.activity-info {
  padding: 20px;
}

.feedback-input {
  padding: 0 20px 20px;
}

.activity-list：这个类用于包裹所有活动卡片的容器。设置了 display: flex; 使其成为一个 Flex 布局容器，flex-wrap: wrap; 则表示子元素超出容器宽度时会自动换行，gap: 20px; 定义了子元素之间的间距为 20px。

.activity-card：这个类定义了每个活动卡片的样式。flex: 1 0 300px; 设置了弹性增长，占据剩余空间，并且最大宽度为 300px，这样可以使卡片在容器中自动调整宽度。margin-bottom: 20px; 添加了下外边距，使每个卡片之间有一定的间距。border-radius: 15px; 设置了圆角为 15px，box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 添加了一个轻微的阴影效果。

.activity-info：这个类定义了活动信息部分的样式，即学号、机构 ID、校园活动 ID、学生记录等。padding: 20px; 设置了内边距为 20px，增加了内容与边框之间的间距。

.feedback-input：这个类定义了反馈输入框部分的样式。padding: 0 20px 20px; 设置了上边距为 0，左右内边距为 20px，下内边距为 20px，使反馈输入框与周围内容之间有一定的间距。

这里是使用gpt说的，

这里面主要是flex属性,看官方文档 flex - CSS：层叠样式表 | MDN (mozilla.org)

flex 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

然后通过父组件的显示，可以展示出类似响应式的效果。

3、使用element-plus -- <el-row>

这里还可以使用<el-row>的响应式，但是如果是按照一个for循环遍历的情况下

代码如下：

<template>
  <div class="activity-list">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="activity in activities" :key="activity.id">
        <el-card class="activity-card">
          <div class="activity-info">
            <p><strong>学号：</strong>{{ activity.username }}</p>
            <p><strong>机构 ID：</strong>{{ activity.institution_id }}</p>
            <p><strong>校园活动 ID：</strong>{{ activity.campus_id }}</p>
            <p><strong>学生记录：</strong>{{ activity.content }}</p>
            <p><strong>学生反馈：</strong>{{ activity.feedback_stu }}</p>
            <p><strong>机构反馈：</strong>{{ activity.feedback_institution }}</p>
          </div>
          <div class="feedback-input">
            <el-input v-model="activity.institutionFeedback" placeholder="请输入机构反馈" />
            <el-button type="primary" @click="submitFeedback(activity)">提交反馈</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

直接放在卡片上作为父级元素。

完整代码：

<template>
  <div class="activity-list">
    <el-card v-for="activity in activities" :key="activity.id" class="activity-card">
      <div class="activity-info">
        <p><strong>学号：</strong>{{ activity.username }}</p>
        <p><strong>机构 ID：</strong>{{ activity.institution_id }}</p>
        <p><strong>校园活动 ID：</strong>{{ activity.campus_id }}</p>
        <p><strong>学生记录：</strong>{{ activity.content }}</p>
        <p><strong>学生反馈：</strong>{{ activity.feedback_stu }}</p>
        <p><strong>机构反馈：</strong>{{ activity.feedback_institution }}</p>
      </div>
      <div class="feedback-input">
        <el-input v-model="activity.institutionFeedback" placeholder="请输入机构反馈" />
        <el-button type="primary" @click="submitFeedback(activity)">提交反馈</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Activity {
  id: number;
  username: string;
  institution_id: string;
  campus_id: string;
  content: string;
  feedback_stu: string;
  feedback_institution: string;
  institutionFeedback: string; // 新增字段：机构反馈
}

const activities = ref<Activity[]>([
  {
    id: 1,
    username: 'user1',
    institution_id: 'inst1',
    campus_id: 'campus1',
    content: 'Some activity content',
    feedback_stu: 'Student feedback',
    feedback_institution: 'Institution feedback',
    institutionFeedback: '', // 新增字段：机构反馈
  },
  {
    id: 2,
    username: 'user2',
    institution_id: 'inst2',
    campus_id: 'campus2',
    content: 'Another activity content',
    feedback_stu: 'Another student feedback',
    feedback_institution: 'Another institution feedback',
    institutionFeedback: '', // 新增字段：机构反馈
  },
]);

function submitFeedback(activity: Activity) {
  console.log(`Submitting feedback for activity with id ${activity.id}`);
  console.log(`Institution feedback: ${activity.institutionFeedback}`);
  // 这里添加提交机构反馈的逻辑，比如发送请求到后端
}
</script>

<style scoped>
.activity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.activity-card {
  flex: 1 0 300px; /* 自适应宽度，最大宽度 300px */
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.activity-info {
  padding: 20px;
}

.feedback-input {
  padding: 0 20px 20px;
}
</style>