HTML5 CSS：行和大小调整

下面的代码是响应性的，可以调整大小等。 但我正在寻找一些真正简单的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> 

不确定我是否需要这个外部div align center，似乎不起作用

          <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>

这是第一次
您可以使用媒体查询。然后您可以处理每个像素的样式

@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
}

您可以使用媒体查询进行此操作。在桌面上为每一个设置约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行，本例中为
）

编辑：居中需要一点数学知识。我为你编了一把小提琴，解释一下


计算宽度的方法是，首先计算空白（或边距）出现的次数（在本例中为2），因此，如果要获取全部可用宽度并减去边距的2倍，则列将覆盖剩余空间。因此，将剩余的空间除以3（注意，公式中的括号使其起作用）。
现在，除了第一列之外，所有列都有左边距（或者除了最后一列之外，所有列都有右边距）

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

编辑2:更新了媒体查询的FIDLE链接

Thx Rav。。。
工作小提琴：jsfiddle.net/w648ng81/36
媒体查询绝对是一种方式，你可以在这里进行电话、平板电脑和桌面（或你定义的任何其他大小）我想我要说的是，本地文件中的css，以便我可以操作。w3是一个链接拉，我不能很好地操纵它。所以寻找简单的css。我可以将其放入本地css文件和控件中。您可以创建自己的css样式表并包含此代码。。如果需要，可以重命名这些类。上面的代码片段是独立工作的（它不依赖于W3）。让我知道如果我没弄好，你在找别的东西。浮动在所有其他元素的左边和上面。嗯。需要居中，而不是在其他分区/分区的顶部。我添加了一个提琴来居中放置内容（这应该只包括在桌面上，或者在需要3列布局的地方）。希望有帮助。如果答案是正确的，请务必将其标记为正确。当屏幕大小不同时，不响应转到单列。六羟甲基三聚氰胺六甲醚
@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%;
    }
}