这怎么能有反应

Question

我尝试了 100% 宽度，但没有成功，因为它不符合要求。任何人请指导我。滑动器有时会覆盖它不在列中的文本。在手机或平板电脑上，我希望他们用滑动条填充屏幕并在滚动时休息 down.in 移动视图一旦我达到 528px 任何帮助都会被剪切在移动设备中，我希望它看起来像图片中显示的那样preview

var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          thumbs: {
            swiper: galleryThumbs
          }
        });

ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 568px;
    padding-left: 0;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/[=11=]a0";
}
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
.product{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.page-container {
    display: grid;
    grid-template-columns: auto 622px;
    grid-column-gap: 21px;
    grid-row-gap: 10px;
}

.swiper-container {
    width: 538px;
    height: 725px;
}
.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
  
.swiper-slide {
    background-size: cover;
    background-position: center;
}
  
.gallery-top {
    height: 78%;
    width: 100%;
}
  
.gallery-thumbs {
    margin-top: 6px;
    height: 18%;
    box-sizing: border-box;
    padding: 10px 0;
}
  
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
  
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

  
.box2 {
    background-color: yellow;
    min-width: 200px;
}
.product-title{
    font-size: 28px;
}
  
.box3 {
    background-color: blue;
    grid-row: 2;
    grid-column: 1 / span 3;
    min-height: 200px;
}
@media only screen and (max-width: 800px) {
  .page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>
<body>
    
    <div class="product">
        <div class="page-container"> <!-- Container -->
            <div class="swiper-container">
                <!-- Column 1 (Swiper) -->
                <!-- Swiper -->
                <div class="swiper gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                </div>
            </div>
            
            
            <!-- Column 2 (Details) -->
            <div class="box2">
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Desert Safari</a></li>
                    <li>Morning Safari</li>
                </ul>
                <h1 class="product-title">Morning Safari</h1>
                
            </div>
          
           
            <!-- Content that spans two rows -->
            <div class="box3">
                Content that spans two rows
            </div>
            
        </div>
    </div>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>
</html>

Answer 1

所以通常我的方法是，当我遇到这样的事情时，会添加 media queries 并确保 page-container div 不是网格显示查询。例如，我会做的是让它以一定宽度弯曲并将弯曲方向从行更改为列，并将项目居中对齐。使用此 flex-direction: column; 非常适合移动设备。

var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          thumbs: {
            swiper: galleryThumbs
          }
        });

ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 568px;
    padding-left: 0;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/[=11=]a0";
}
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
.product{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.page-container {
    display: grid;
    grid-template-columns: auto 622px;
    grid-column-gap: 21px;
    grid-row-gap: 10px;
}

.swiper-container {
    width: 538px;
    height: 725px;
}
.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
  
.swiper-slide {
    background-size: cover;
    background-position: center;
}
  
.gallery-top {
    height: 78%;
    width: 100%;
}
  
.gallery-thumbs {
    margin-top: 6px;
    height: 18%;
    box-sizing: border-box;
    padding: 10px 0;
}
  
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
  
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

  
.box2 {
    background-color: yellow;
    min-width: 200px;
}
.product-title{
    font-size: 28px;
}
  
.box3 {
    background-color: blue;
    grid-row: 2;
    grid-column: 1 / span 3;
    min-height: 200px;
}
  
@media only screen and (max-width: 800px) {
  .page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media only screen and (max-width: 550px) {
.swiper-container {
    width: 450px;
    height: 725px;
  }
}

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>
<body>
    
    <div class="product">
        <div class="page-container"> <!-- Container -->
            <div class="swiper-container">
                <!-- Column 1 (Swiper) -->
                <!-- Swiper -->
                <div class="swiper gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                </div>
            </div>
            
            
            <!-- Column 2 (Details) -->
            <div class="box2">
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Desert Safari</a></li>
                    <li>Morning Safari</li>
                </ul>
                <h1 class="product-title">Morning Safari</h1>
                
            </div>
          
           
            <!-- Content that spans two rows -->
            <div class="box3">
                Content that spans two rows
            </div>
            
        </div>
    </div>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>
</html>

这怎么能有反应

how can this be responsive

html

css

responsive

swiper.js