需按Mockup实现多端适配文本样式，求前端解决方案

问题描述 #

我是一名准初级开发者，需要把文本样式调整得和Mockup完全一致，这个Mockup是移动端版本，在平板和桌面端样式会变化。我本来想只用列表布局，但觉得没法适配平板/桌面端；尝试调整padding和margin也没效果。相关效果和代码如下：

准初级开发者成长中。
我需要把文本样式调整得和这张图里的完全一样，这是移动端版本。

平板和桌面端的样式会不一样。

我本来想只用列表，但觉得没法适配平板/桌面版本。

<div class="swiper-slide customer-review__slide">
        <img
          src="images/review-1-85.png"
          srcset="images/review-1-170.png 2x"
          alt="满意的客户"
          class="customer-review__picture"
        />
        <div class="customer-review__quote">
          <p class="customer-review__paragraph">
            Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In
            hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus.
          </p>
        </div>
        <div class="customer-review__dots">
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
          <svg width="8" height="8" class="customer-review__circle">
            <circle r="2" cx="4" cy="4" />
          </svg>
        </div>
        <h3 class="customer-review__name">Emily, Los Angeles</h3>
      </div>

我试过调整padding和margin，但没起作用，提前感谢各位！

解决方案 #

1. 用Flexbox+媒体查询实现多端适配

不用列表布局，Flexbox能灵活控制元素排列方向，配合媒体查询轻松适配各端：

/* 移动端基础样式 */
.customer-review__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* 替代margin/padding，更稳定的间距控制 */
  padding: 1.5rem;
}

.customer-review__quote, .customer-review__name {
  text-align: center;
}

/* 平板端适配（768px以上） */
@media (min-width: 768px) {
  .customer-review__slide {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .customer-review__quote {
    flex: 1; /* 让文本区域占满剩余空间 */
    margin-left: 2rem;
    text-align: left;
  }

  .customer-review__name {
    margin-left: 2rem;
  }
}

/* 桌面端适配（1024px以上） */
@media (min-width: 1024px) {
  .customer-review__slide {
    padding: 2rem 4rem;
    gap: 2rem;
  }

  .customer-review__picture {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%; /* 若Mockup头像是圆形则添加 */
  }
}

2. 解决padding/margin无效问题

先排查这几点：

• 打开浏览器开发者工具，查看元素的Computed样式，确认是否被其他CSS规则覆盖
• 给元素添加box-sizing: border-box;，避免padding撑开元素尺寸
• 如果是Swiper组件的默认样式干扰，可给.customer-review__slide添加!important临时排查（不推荐长期使用，建议优先调整选择器权重）

3. 引用圆点的响应式调整

.customer-review__dots {
  display: flex;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .customer-review__dots {
    justify-content: flex-start;
    margin-left: 2rem;
  }
}

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