html - 响应式 4x4 CSS 网格

Question

我很难创建响应式 CSS 网格。例如，这是我想要在桌面上输出的内容:

________________________________________________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 | Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------------------------------------------|
| Info 1 | Info 2 | info 3 | info 4 | Info 5 | Info 6 | Info 7 | Info 8 |
-------------------------------------------------------------------------

但这就是我想要在手机上输出的内容:

_____________________________________
| Stat 1 | Stat 2 | Stat 3 | Stat 4 |
|------------------------------------
| Info 1 | Info 2 | info 3 | info 4 |
-------------------------------------
| Stat 5 | Stat 6 | Stat 7 | Stat 8 |
|-----------------------------------|
| Info 5 | Info 6 | Info 7 | Info 8 |
 ------------------------------------

我有以下 HTML 和 CSS，它们可以在桌面上正确输出，但在移动设备上无法正确输出。

HTML

<div id="statcontainer">
    <div class="stat-header row clearfix">
            <div class="stat-value">
                Stat 1
            </div>

            <div class="stat-value">
                Stat 2
            </div>

            <div class="stat-value">
                Stat 3
            </div>

            <div class="stat-value">
                Stat 4
            </div>

            <div class="stat-value">
                Stat 5
            </div>

            <div class="stat-value">
                Stat 6
            </div>

            <div class="stat-value">
                Stat 7
            </div>

            <div class="stat-value">
                Stat 8
            </div>
    </div>

    <div class="stat-content row clearfix">
            <div class="stat-value">
                info 1
            </div>

            <div class="stat-value">
                info 2
            </div>

            <div class="stat-value">
                info 3
            </div>

            <div class="stat-value">
                info 4
            </div>

            <div class="stat-value">
                info 5
            </div>

            <div class="stat-value">
                info 6
            </div>

            <div class="stat-value">
                info 7
            </div>

            <div class="stat-value">
                info 8
            </div>
    </div>
</div>

CSS

.statcontainer {
    display: table;
}

.stat-header {
    display: table-row;
    font-weight: bold;
    text-align: center;
}

.stat-content {
    display: table-row;
}

.stat-value {
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}

Answer 1

首先，当您的用例看起来应该使用 <table> 时，您为什么要使用 div？ ？当您需要这种显示时，HTML 已经有一个表格元素可供使用。

其次，您如何期望在不使用媒体查询的情况下拥有响应式布局？媒体查询将使您的设计具有响应性。你应该始终确保你的初始布局移动优先，媒体查询显示桌面 View 。这是您要实现的目标的简化版本:

https://jsfiddle.net/n4xoj2ju/

HTML:

<table>
  <tr>
    <td>
      Stat 1
    </td>
    <td>
      Stat 2
    </td>
    <td>
      Stat 3
    </td>
    <td>
      Stat 4
    </td>
  </tr>
  <tr>
    <td>
      Info 1
    </td>
    <td>
      Info 2
    </td>
    <td>
      Info 3
    </td>
    <td>
      Info 4
    </td>
  </tr>  
</table><table>
  <tr>
    <td>
      Stat 5
    </td>
    <td>
      Stat 6
    </td>
    <td>
      Stat 7
    </td>
    <td>
      Stat 8
    </td>
  </tr>
  <tr>
    <td>
      Info 5
    </td>
    <td>
      Info 6
    </td>
    <td>
      Info 7
    </td>
    <td>
      Info 8
    </td>
  </tr>  
</table>

CSS:

table tr:first-child {
  font-weight: bold;
}

@media (min-width: 300px) {
  table {
    display: inline-block;
  }
}