响应式 4x4 CSS 网格
Responsive 4x4 CSS grid
我很难创建响应式 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;
}
首先,当您的用例看起来应该使用 <table>
时,您为什么要使用 div? HTML 已经有一个 table 元素可以在您需要这种显示时使用。
其次,您如何期望在不使用媒体查询的情况下拥有响应式布局?媒体查询将使您的设计具有响应性。你应该始终确保你的初始布局移动优先,媒体查询显示桌面视图。这是您要实现的目标的简化版本:
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;
}
}
我很难创建响应式 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;
}
首先,当您的用例看起来应该使用 <table>
时,您为什么要使用 div? HTML 已经有一个 table 元素可以在您需要这种显示时使用。
其次,您如何期望在不使用媒体查询的情况下拥有响应式布局?媒体查询将使您的设计具有响应性。你应该始终确保你的初始布局移动优先,媒体查询显示桌面视图。这是您要实现的目标的简化版本:
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;
}
}