这怎么能响应

Posted 2023-05-08

技术标签:

【中文标题】这怎么能响应【英文标题】：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>

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于这怎么能响应的主要内容，如果未能解决你的问题，请参考以下文章

Windows未成功关闭。如果这是由于系统无响应，或者是为保护数据而关闭系统...这怎么办？

调整标题元素的底部边框以适应文本宽度并响应

VB.NET如何使控件不能响应KeyDown事件

chrome扩展开发,怎么获取响应信息?

怎么让click事件在指定时间内只响应一次，jquery。

我怎么能用角度来动态我的flash消息。消息必须通过API响应