在響應式網頁設計中，常需要處理不同裝置間版面的切換，以表格為例：在桌機上用表格呈現內容，而在行動裝置上使用卡片式版面，這樣的設計優化能夠提升使用者在不同裝置上的瀏覽體驗。
為了達成這種優化，有以下幾種做法：
- 製作兩個版面，利用斷點來進行版面切換
- 製作一個共用版面，搭配 CSS Grid Layout 進行設計，在手機版時調整
<table> 的屬性，達成卡片的視覺效果
本篇介紹第二個做法，這麼做可以降低程式碼的複雜度，提升程式碼可重用性，專案維護性也較高。
廣告
CSS Grid 相關知識，可以參考 這篇文章
概念解析
使用 <table> 建立表格，在行動裝置斷點，將 <tr> 設定為 display: grid，利用格線系統達成卡片式版面
HTML
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Ingredient</th>
<th scope="col">Price</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td class="product">Apple Juice</td>
<td class="ingredient">Apple, Sugar, Water</td>
<td class="price">$ 100</td>
<td class="add-btn">
<button type="button">Add</button>
</td>
</tr>
...
</tbody>
</table>
|
CSS
- 設定斷點為 W768（Ipad）
- 當螢幕視窗小於 768px，
tbody > tr 設定為 display: grid，td 欄位利用格線系統排版
table {
width: 1000px;
max-width: 100%;
margin: 0 auto;
white-space: nowrap;
border-spacing: 5px;
}
@media screen and (max-width: 768px) {
thead {
display: none;
}
tbody > tr {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.index {
display: none;
}
.product {
justify-self: start;
margin-bottom: 0.5rem;
}
.ingredient {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
.price {
grid-column: 1;
grid-row: 3;
justify-self: start;
align-self: center;
}
.add-btn {
grid-column: 2;
grid-row: 3;
justify-self: end;
align-self: center;
}
}
|
範例程式碼
參考資源：
https://adamlynch.com/flexible-data-tables-with-css-grid/
https://codepen.io/gilli/pen/QVaWGR
廣告
評論