HTML5 CSS：行和调整大小

Question

下面的代码是响应式和调整大小等。 但我正在寻找一些真正简单的 CSS 来在桌面和移动设备上调整大小。

我知道我可以使用标题链接 w3.css 中的 CSS，但必须有更好的方法来轻松地在桌面和移动设备上显示一些东西。

移动设备默认为内联显示，但在桌面显示为 3 行。

有没有比w3学校更简单的解决方案？

只是尝试做几行，然后在移动设备上调整为单行...

链接 rel 进入标题：

       <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

      <div class="w3-row">

       <div class="w3-third w3-container w3-green" align=center>
         <h2>w3-third</h2>
         Stuff here too
       </div>

       <div class="w3-third w3-container w3-red">
        <h2>w3-third</h2>
       </div>

       <div class="w3-third w3-container w3-blue">
        <h2>w3-third</h2>
       </div>

     </div> 

在 Ahmed 和 Raven 的帮助下，我必须到达下方。但不居中。我也改为 90% 以留出一些间距。

在大多数情况下有效，但不以更大的宽度为中心。宽度较小时会翻转为单行，这很好。我正在寻找这样的移动响应。到目前为止代码很简单，我可以很容易地操作。

CSS

       @media only screen and (min-width:320px) and (max-width: 600px) {

         .display {
            width: 90%;
            background: #f1f1f1;
            padding: 10px;
            border: solid 2px #998E67;
            margin: 5px;
                  }
        }

       @media only screen and (min-width:600px) {
           .display {
               float: left;
               width: 30%;
               background: #f1f1f1;
               padding: 10px;
               border: solid 2px #998E67;
               margin: 5px;
                }
        }

不确定我是否需要这个外部 div 对齐中心，似乎不起作用。

          <div align=center style="border: 1px solid ##000">

          <div class="display" align=center>
            <img src="../../images/img.png" height="55" border="0">
            <h2>This is first</h2>
          </div>

          <div class="display"">
            <h2>This is second</h2>
          </div>

          <div class="display">
            <h2>This is Third</h2>
            <img src="../../images/image" height="55" border="0">
          </div>

         </div>

Answer 1

您可以使用媒体查询。然后你可以处理每个像素的样式

@media only screen and (min-width: 320px) and (max-width: 575px) {
//Use  your styling here
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
//Use  your styling here
}

Answer 2

您可以为此使用媒体查询。在桌面上为它们中的每一个设置大约 33% 的宽度，在移动设备上设置大约 100% 的宽度。

@media only screen and (min-width:320px) and (max-width: 600px) {
    .w3-third {
        width: 100%
    }
}

@media only screen and (min-width:600px) {
    .w3-third {
        float: left;
        width: 33.33%;
    }
}

这样，您可以使用不同的媒体查询轻松调整列的大小。

顺便说一句，确保在父级上包含 clearfix（在这种情况下为.w3-row）。

编辑：居中涉及一点数学。我已经为你制作了一些解释。

https://jsfiddle.net/zmvphaj0/4/

计算宽度的方法是首先计算空白空间（或装订线）出现的次数（在我们的例子中是 2 次），因此，如果您要采用完整的可用宽度并减去 2 次装订线，您'将具有列应覆盖的剩余空间。因此，您将剩余空间除以 3（请注意，该公式中的括号使其起作用）。 现在，您为除第一列之外的所有列（或除最后一列之外的所有列）赋予一个左边距。

同样的逻辑适用于 12 列网格布局中的所有其他列宽。

编辑 2： 更新了带有媒体查询的小提琴链接。

谢谢拉夫... 工作小提琴：jsfiddle.net/w648ng81/36