如何进行响应式布局？

Question

我想制作一个响应式表布局，当屏幕足够大时，它具有四列。屏幕足够小时，每行应有两列。在移动设备上，每行应该有一列。

让我展示我的HTML / CSS

.conatiner .table {
  display: table;
  width: 100vw;
}

.container .table .table-row {
  display: table-row;
}

.container .table .table-row .table-cell {
  display: table-cell;
  width: 25%;
  padding: 10px;
}

.container .table .table-row .table-cell .name {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0;
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
}

.container .table .table-row .table-cell .img {
  display: block;
  width: 100%;
  height: 280px;
  margin: 0 auto;
  background-color: brown;
}

.container .table .table-row .table-cell .content {
  display: block;
  width: 100%;
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这看起来像是典型的flex布局。

对于响应部分，您需要flexwrap和min-with或mediaquerie

带有mediaquerie的示例

.conatiner .table { 
}

.container .table .table-row {
  display:flex;
  flex-wrap:wrap;
}

.container .table .table-row .table-cell {
  flex:1;
  min-width: 20%;
  padding: 10px;
  /*optionnal*/
  display:flex;
  flex-direction:column;
}

.container .table .table-row .table-cell .name {
  text-align: center; 
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
  /*optionnal*/
  flex:1;
}

.container .table .table-row .table-cell .img {  
  height: 280px; 
  background-color: brown;
}

.container .table .table-row .table-cell .content { 
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

@media screen and (max-width:992px) {
  .container .table .table-row .table-cell {
    min-width:40%;
  }
}

@media screen and (max-width:576px) {
  .container .table .table-row  {
    display:block;
  }
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

flex：1 + min-width是一种无需添加最终宽度就可以添加一些边距（或填充/边框取决于框大小）的方法。 flex:1;min-width:20%;将在完全填充的一行上喷涂4个元素，其中flex模型将注意边缘，边框或填充。