Vue.js+Vuetify团队展示页移动端堆叠布局的规范实现咨询

Hey there! Let's get that team member layout working perfectly across all screen sizes—Vuetify's breakpoint system is made exactly for this kind of responsive design problem.

Right now, your cols="2" and cols="8" are applying to all screen sizes, which is why your content stays side-by-side even on small devices. To fix this, we can use Vuetify's breakpoint-specific column classes to define different behavior for small vs. desktop screens.

How It Works #

Vuetify uses predefined breakpoints (xs, sm, md, lg, xl) to target different screen widths. For your case:

• On small screens (xs, <600px): We want each section (image + description) to take up the full width of the row, so they stack vertically.
• On desktop screens (md, ≥960px): Keep the side-by-side layout with your original column proportions.

Modified Code #

Here's how to update your component to achieve this:

<template>
  <v-container>
    <v-row class="mb-6 align-center"> <!-- Add align-center for vertical centering on desktop -->
      <!-- Image column: full width on xs, 2 columns on md+ -->
      <v-col xs="12" md="2" class="d-flex justify-center mb-4 md:mb-0">
        <v-img 
          :src="member.elements.picture.value[0].url" 
          height="12em"
          max-width="100%" <!-- Ensure image doesn't overflow on small screens -->
        ></v-img>
      </v-col>
      
      <!-- Description column: full width on xs, 10 columns on md+ (adjusted for better spacing) -->
      <v-col xs="12" md="10">
        <v-container class="text-justify body-1" v-html="member.elements.description.value"></v-container>
      </v-col>
    </v-row>
  </v-container>
</template>

Key Changes Explained #

1. Breakpoint-specific column classes: xs="12" tells Vuetify to make the column take up all 12 grid columns on extra-small screens, forcing it to stack. md="2"/md="10" applies the side-by-side layout only on medium and larger screens.
2. Vertical centering: Added align-center to the v-row so the image and description are vertically aligned on desktop for a cleaner look.
3. Spacing adjustments: Added mb-4 md:mb-0 to the image column—this adds bottom margin on small screens (creating space between the image and description when stacked) and removes it on desktop.
4. Image responsiveness: Added max-width="100%" to the v-img to prevent it from overflowing its container on small screens.

Bonus Tips #

• If you want the switch from stacked to side-by-side to happen at a different screen size, replace md with sm (≥600px) or lg (≥1264px) depending on your needs.
• You can tweak the column proportions (like md="3" and md="9") to adjust how much space the image takes up on desktop.

内容的提问来源于stack exchange，提问作者paupaulaz