这怎么能响应

【问题标题】：how can this be responsive这怎么能响应
【发布时间】：2022-01-05 09:43:52
【问题描述】：

我尝试了 100% 宽度但没有运气，因为它不符合要求。任何人请指导我。刷卡器有时会遇到它不留在列中的文本。在移动设备或平板电脑中，我希望他们在向下滚动时用滑动器幻灯片填充屏幕并休息。在移动设备视图中，一旦我达到 528px 任何帮助，一切都会被剪切 在移动设备中，我希望它看起来像 imagepreview

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: "/\00a0";
}
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>

【问题讨论】：

    标签： html css responsive swiper.js


    【解决方案1】：

    因此，当我遇到类似情况时，通常我的方法是添加 media queries 并确保 page-container div 不是这些查询中的网格显示。例如，我要做的是给它一个特定宽度的 flex 并将 flex-direction 从行更改为列，并在中心对齐项目。使用这个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: "/\00a0";
}
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>

    【讨论】：

      猜你喜欢
      • 2018-11-03
      • 2019-01-12
      • 1970-01-01
      • 2013-02-20
      • 1970-01-01
      • 2020-07-24
      • 2016-03-19
      • 2010-09-13
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode