如何修复Vue.js中sm版本列布局文本过窄的问题？

问题根源 #

1. 文本列固定设置cols="6"，在移动端仍仅占一半宽度，导致文本区域过窄
2. 图片硬编码宽高，未利用Vuetify栅格的响应式特性，适配性差

修改后的代码 #

<template>
  <v-container fluid>
    <!-- 使用v-row替代v-layout，贴合Vuetify栅格规范 -->
    <v-row align="center" class="flex-wrap">
      <!-- 图片列：md及以上占6列，sm及以下占满整行 -->
      <v-col md="6" class="d-flex justify-center">
        <v-img
          src="https://images.pexels.com/photos/3987020/pexels-photo-3987020.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          lazy-src="random image"
          aspect-ratio="16/9" <!-- 用比例替代固定宽高，自适应容器 -->
          class="grey lighten-2"
          max-width="550px" <!-- 限制最大宽度，避免大屏下图片过大 -->
          contain <!-- 保持图片比例，防止拉伸变形 -->
        />
      </v-col>
      <!-- 文本列：md及以上占6列，sm及以下占满整行 -->
      <v-col md="6" class="px-4">
        <div class="text-center">
          <h1>A simple Read More, Read Less pen in Vue.js</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
            fringilla urna. Etiam tempor orci eu lobortis. Integer quis auctor elit sed vulputate mi sit. Lacinia
            at quis risus sed vulputate odio ut enim blandit. Nibh praesent tristique magna sit amet purus. Eleifend donec pretium vulputate sapien nec
            sagittis. Facilisi morbi tempus iaculis urna id volutpat. Ultrices neque ornare aenean euismod.<span v-if="readMore"></span>
            <span v-else>...</span>
          </p>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

关键修改说明 #

• 响应式列控制：将文本列的cols="6"改为md="6"，md及以上屏幕横向分两列，sm及以下自动占满整行，解决移动端文本过窄问题
• 图片适配优化：
  • 移除硬编码的宽高判断，改用aspect-ratio定义图片比例，随容器宽度自适应缩放
  • 新增max-width限制图片最大尺寸，避免大屏下图片过度拉伸
  • 用contain属性保证图片比例不变形
• 布局简化：用v-row替代v-layout，配合d-flex justify-center实现图片居中，符合Vuetify布局逻辑
• 文本边距调整：给文本列添加px-4内边距，避免移动端文本紧贴屏幕边缘

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