Swiper轮播组件响应式适配问题求助：移动端内容裁切、覆盖文本如何解决

API 探路者

2026-9-24

问题根因

你遇到的Swiper响应式失效、内容覆盖、小屏裁切问题，核心是代码里多处硬编码了固定宽度，没有做自适应适配：

.swiper-container 固定了538px宽度，小屏设备下无法跟随屏幕宽度缩放
面包屑导航ul.breadcrumb 固定了568px宽度，超出小屏宽度后会溢出，导致内容被裁切
原有800px断点的媒体查询仅调整了布局方向，没有重置容器的固定宽度限制，也没有适配Swiper的高度

修复方案

1. 替换原有CSS中以下部分

/* 面包屑导航自适应 */
ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 568px;
    width: 100%;
    padding-left: 0;
}

/* Swiper容器自适应，最大宽度保持桌面端尺寸，小屏自动占满可用宽度 */
.swiper-container {
    max-width: 538px;
    width: 100%;
    height: 725px;
}

/* 原有800px断点适配补充 */
@media only screen and (max-width: 800px) {
  .page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .swiper-container {
    height: 600px;
  }
}

/* 新增528px以下小屏断点，Swiper占满屏幕宽度 */
@media only screen and (max-width: 528px) {
  .swiper-container {
    width: 100vw;
    height: 500px;
  }
  .product, .page-container {
    width: 100%;
    padding: 0;
  }
  .box2 {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
  }
}