网格内另一个 div 内的 div 的响应性答案

【问题标题】：Responsiveness of divs inside another div which is inside a grid网格内另一个 div 内的 div 的响应性
【发布时间】：2020-04-28 18:13:16
【问题描述】：

我正在尝试处理父 div 中多个 div 的完全响应性，并且在网格视图中有多个类似类型的父 div，其值为 class="col-md-6"。我尝试减小图像宽度和字体大小，但没有任何事情发生。我希望它在我们减小屏幕尺寸时自动调整元素，保持值完全可见。我在下面的屏幕截图中分享了代码和问题。

CSS

.games-table{
    padding: 30px;
}

.gameRow{
    box-shadow: 0px 0px 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.gameRow:hover{
    box-shadow: 0px 0px 15px 0px;

}
.gameNo{

    margin-bottom: 0px;
}
.gameNo, .imgBox, .courtBox{
    text-align: center;
}

li{
    list-style-type: none;
}
.imgteam1, .imgteam2{
    width: 48px;
    height:auto;
}
.gamenum-box{
    background-color: #000066;
    color: #ffffff;

}
.gamenum-box, .imgBox, .courtBox{
    padding: 20px 20px;
}
.datetimeBox{
    padding: 5px 5px;
}
.vs-span{
    margin: 0px 10px;
}
th,td{
    padding: 0px 10px;
}
th{
    border-bottom: 1px solid #cccccc;
}
.datetimeBox{
    color: #000000;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0) ) 1 100%;
    background-image: linear-gradient(80deg, #f1f1f1 , white, #f1f1f1);
    transform: skew(-10deg, 0deg);
}
table{
    transform: skew(10deg, 0deg);
    width: 100%;
}

#games{
    z-index:0;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
.newDiv{
    width:50%;

}
.gamenum-box, .courtBox {
    width: 20%;
}
.datetimeBox{
    width:30%;
}
.imgBox{
    width:30%;
}
.gameVis{
    display: none;
}

@media only screen and (max-width:600px){
    .games-table{
        padding:10px;
    }
    .newDiv{
        width:100%;

    }

    .imgteam1, .imgteam2{
        width: 27px;
    }
    .gamenum-box, .imgBox, .courtBox{
        padding: 16px 1px;
    }
    th,td{
        padding: 0px 1px;
    }

}
@media only screen and (max-width:480px){
    .games-table{
        padding: 5px;
    }
    /* .gameNoVis{
        display: none;
    }
    .gameVis{
        display: block;
    } */
    .gamenum-box{
        width: 13%;
    }
    .imgBox{
        width: 32%;
    }
    .datetimeBox{
        width: 40%;
    }
    .courtBox {
        width: 15%;
    }
}

HTML 代码

<div class="game-table">
    <div class="container-fluid">
        <div class="row">  
            <div class="col-12">
                <div class="head mb-4">
                    <h2>Matches</h2>
                </div>
            </div>

        </div>
        <div class="row">  
            <!-- Start Games Section -->
            <div class="col-xs-12 col-md-6 col-sm-12 col-lg-6">
                        <div id="games">
                        <div class="row gameRow">
                            <div class="gamenum-box col-md-2">
                                <p class="gameNo">GAME</p>
                                <p class="gameNo">1</p>
                            </div>
                            <div class="imgBox col-md-4">
                                <img src="../assets/images/games/team1.png" class="imgteam1">
                                <span class="vs-span">VS</span>
                                <img src="../assets/images/games/team2.png" class="imgteam2">
                            </div>
                            <div class="datetimeBox col-md-4">
                                <table>
                                    <tr>
                                        <th><b>Date</b></th>
                                        <th><b>Time</b></th>
                                    </tr>
                                    <tr>
                                        <td><b>12 Jan 2019</b></td>
                                        <td><b>12:00PM</b></td>
                                    </tr>
                                </table>                                 
                            </div> 
                            <div class="courtBox col-md-2">
                                <p class="gameNo">COURT</p>
                                <p class="gameNo">1</p>
                            </div>                
                        </div>
                        </div>                       
            </div>
            <div class="col-xs-12 col-md-6 col-sm-12 col-lg-6">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">1</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="../assets/images/games/team1.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="../assets/images/games/team2.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gameNo">COURT</p>
            <p class="gameNo">1</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section -->

        </div>
    </div>
</div>

截图

使用的实际图片

【问题讨论】：

我在代码片段中检查了您的代码，但是当您必须检查各种屏幕上的响应性时，它无法正常工作。我在自己的环境中检查了您的代码，您的网页看起来不错。我无法做出的唯一评估是您没有原始图像。我怀疑您的图像是问题所在，否则网格在响应性方面工作得很好。
您能否在您的图像中添加一个代码 sn-p，以便我们在有任何问题时进行调整？或者我不知道...分享你的图片。
@Mugé 我已经分享了问题帖子中的图片！请检查... 至于代码 sn-p，这是来自 Angular 8 代码的一个组件。
那么它对你有用吗？
是的。谢谢！我还创建了一个没有盒子高度的响应式设计，效果很好！

标签： html css bootstrap-4 responsive-design

【解决方案1】：

您的问题非常广泛，但我将尝试以鸟瞰的方式解释如何处理您的项目。

很明显，您使用的是引导程序，它对于各种屏幕来说是非常完美的样式。

您的编码风格需要一些改进，它们有点到处都是。排列 div 时，从较大的网格开始。

例子：

<div class="col-xs-12 col-md-6 col-sm-12 col-lg-6">

必须是

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12>   // hierarchically

首先清理那部分。

其次，您需要继续从网格的角度进行思考。在网格内部，您再次划分为网格，就好像它是一整页一样，因此所有网格都很好地相互补充和排列，就像您的父网格一样（在完美的世界中！）。

网格的不足是当您在一个框中有更多文本时，与第二个框相比，一个会比下一个框长。所以文本的数量会影响你的网格的高度，除非你给这些盒子一个高度，或者你所有的文本都和你的其他盒子一样多的字符。当您为大屏幕指定高度时，您需要通过@media 调整这些高度。这只是为了简化“响应式网站”的概念。

CSS

.my-fixed-height-box-01 {
    height: 3em;     // adapt to your design
    }

@media only screen and (max-width:600px) {
    .my-fixed-height-box-01 {
    height: 4em;     // adapt to your design
    }
}

@media only screen and (max-width:480px) {
    .my-fixed-height-box-01 {
    height: 6em;     // adapt to your design
    }
}

Bootstrap 具有图像设计元素，这些元素也会使图像具有响应性。

尽量让您的代码井井有条且干净整洁，这样您就可以更轻松地在它们的基础上构建代码。当您在此过程中遇到特定问题时，Stackoverflow 是一个不错的选择。

【讨论】：

从大到小分层使用类不是问题，因为 Bootstrap 是“移动优先”。
@bron 这不是关于屏幕，而是关于保持你的代码干净。养成组织的习惯。
在模板中组织代码是一种很好的做法，但是 Boostrap css 是移动优先的，所以我认为最好的方法是模板也首先是移动编码的。 BS 文档和示例也使用这种方法。
@Mugé 兄弟你检查图像了吗？
@Mugé .my-fixed-height-box-01 是哪个容器的高度？

【解决方案2】：

我之前的回答是关于如何处理网格的假设性总体概念化。

至于我的解决方案，我不会用表格来设计它，因为表格会限制设计的发展。但是，如果必须，使用表格也可以。

再一次，如果我不得不重新编码，我会走另一条路。

我添加了一些@media 解决方案。

另外一定要记住，当您使用响应式设计并且想要在网格内对齐图像时，请确保它们都具有相同的大小。即使是 1px 的差异也会让您头疼。

在我的示例中，我已将图像大小调整为 200 像素的高度和宽度。即使它在您的屏幕上看起来不错，但当图像变大时也会存在差异，即使是现在，如果您这样放置，一个看起来会比另一个小。

更重要的是，我将您的图片从 .png 更改为 .jpg。除非您需要在图像中使用透明背景，否则可以使用 .png，否则使用 .jpg，因为它是一个较小的文件并且更适合您的页面加载。另外，如果您要使用缩略图之类的图像，200px 太大了，请将它们缩小到 60px 或其他大小，具体取决于您的屏幕尺寸。

.games-table{
    padding: 30px;
}

.gameRow{
    box-shadow: 0px 0px 6px 0px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.gameRow:hover{
    box-shadow: 0px 0px 15px 0px;

}
.gameNo{

    margin-bottom: 0px;
}
.gameNo, .imgBox, .courtBox{
    text-align: center;
}

li{
    list-style-type: none;
}
.imgteam1, .imgteam2{
    width: 48px;
    height:auto;
}
.gamenum-box{
    background-color: #000066;
    color: #ffffff;

}
.gamenum-box, .imgBox, .courtBox{
    padding: 20px 20px;
}
.datetimeBox{
    padding: 5px 5px;
}
.vs-span{
    margin: 0px 10px;
}
th,td{
    padding: 0px 10px;
}
th{
    border-bottom: 1px solid #cccccc;
}
.datetimeBox{
    color: #000000;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to top, #cccccc, rgba(0, 0, 0, 0) ) 1 100%;
    background-image: linear-gradient(80deg, #f1f1f1 , white, #f1f1f1);
    transform: skew(-10deg, 0deg);
}
table{
    transform: skew(10deg, 0deg);
    width: 100%;
}

#games{
    z-index:0;
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}
.newDiv{
    width:50%;

}
.gamenum-box, .courtBox {
    width: 20%;
}
.datetimeBox{
    width:30%;
}
.imgBox{
    width:30%;
}
.gameVis{
    display: none;
}

@media (min-width: 766px) {
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

  .container {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgbox {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgteam1, .imgteam2{
        width: 30.3333% !important;
    }

    .imgbox {
        width: 100%;
    }

     th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label {
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}

@media (min-width: 601px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .imgbox {
    padding-right: 5px;
    padding-left: 5px;
  }

  .imgteam1, .imgteam2{
        width: 33.3333%;
    }

    .imgbox {
        width: 100%;
    }

     th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label { /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}


@media only screen and (max-width:600px){
    
    .games-table{
        padding:10px;
    }
    .newDiv{
        width:100%;

    }

    .imgteam1, .imgteam2{
        width: 27px;
    }
    .gamenum-box, .imgBox, .courtBox{
        padding: 16px 1px;
    }
    th,td{
        padding: 0px 1px;
    }
    p, ul, blockquote, pre, td, th, label {  /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    }
}
@media only screen and (max-width:480px){
 
    .games-table{
        padding: 5px;
    }
    /* .gameNoVis{
        display: none;
    }
    .gameVis{
        display: block;
    } */
    .gamenum-box{
        width: 13%;
    }
    .imgBox{
        width: 32%;
    }
    .datetimeBox{
        width: 40%;
    }
    .courtBox {
        width: 15%;
    }
    p, ul, blockquote, pre, td, th, label {  /* This part I extended to other style designs as well */
    margin: 0;
    font-size: 80%;
    line-height: 1.5em;
    margin-bottom: 1.5em;
    }
}

<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Stylesheets -->    
    <link href="bootstrap.css" rel="stylesheet">    
    <link rel="stylesheet" href="game_team.css" />
</head>


<div class="game-table">
    <div class="container-fluid">
        <div class="row">  
            <div class="col-12">
                <div class="head mb-4">
                    <h2>Matches</h2>
                </div>
            </div>

        </div>
        <div class="row">  
            <!-- Start Games Section 1 -->
        <div class="col-lg-6 col-md-6 col-sm-12  col-xs-12">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">1</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gameNo">COURT</p>
            <p class="gameNo">1</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section 1 -->

            <!-- Start Games Section 2 -->
            <div class="col-lg-6 col-md-6 col-sm-12  col-xs-12">
             <div id="games">
             <div class="row gameRow">
        <div class="gamenum-box col-md-2">
            <p class="gameNo">GAME</p>
            <p class="gameNo">2</p>
        </div>
        <div class="imgBox col-md-4">
            <img src="https://i.stack.imgur.com/XjbQJ.png" class="imgteam1">
            <span class="vs-span">VS</span>
            <img src="https://i.stack.imgur.com/mJdIz.png" class="imgteam2">
        </div>
        <div class="datetimeBox col-md-4">
            <table>
                <tr>
                    <th><b>Date</b></th>
                    <th><b>Time</b></th>
                </tr>
                <tr>
                    <td><b>12 Jan 2019</b></td>
                    <td><b>12:00PM</b></td>
                </tr>
            </table>                                 
        </div> 
        <div class="courtBox col-md-2">
            <p class="gamebox">COURT</p>
            <p class="gameNo">2</p>
        </div>                
    </div>
    </div>                       
</div>
            <!-- End Games Section 2 -->

        </div>
    </div>
</div>

【讨论】：