響應式網頁設計 - 網格檢視
什麼是網格檢視？
許多網頁都是基於網格檢視的，這意味著頁面被分成多個列。
使用網格檢視在設計網頁時非常有幫助。它使在頁面上放置元素更加容易。
響應式網格檢視通常有 12 列，總寬度為 100%，並且會隨著瀏覽器視窗大小的調整而收縮和擴充套件。
構建響應式網格檢視
讓我們開始構建一個響應式網格檢視。
首先，請確保所有 HTML 元素的 box-sizing 屬性都設定為 border-box。這可以確保內邊距和邊框包含在元素的總寬度和高度中。
在您的 CSS 中新增以下程式碼
* {
box-sizing: border-box;
}
在我們的 CSS 盒模型章節中閱讀更多關於 box-sizing 屬性的內容。
以下示例展示了一個簡單的響應式網頁，包含兩列
25%
75%
上面的示例對於網頁只包含兩列的情況是可以的。
然而，我們想使用一個有 12 列的響應式網格檢視，以便對網頁進行更多控制。
首先，我們必須計算一列的百分比：100% / 12 列 = 8.33%。
然後，我們為這 12 列中的每一列建立一個類，class="col-"，後跟一個數字，定義該部分應跨越多少列。
CSS
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
自己動手試一試 »
所有這些列都應向左浮動，並具有 15px 的內邊距。
CSS
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
每一行都應該用一個 <div> 包裹。一行中的列數應始終加起來為 12。
HTML
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
一行中的列都向左浮動，因此它們被移出了頁面的流動。其他元素將放置得好像這些列不存在一樣。為了防止這種情況，我們將新增一個清除浮動的樣式。
CSS
.row::after {
content: "";
clear: both;
display: table;
}
我們還想新增一些樣式和顏色，使其看起來更好。
示例
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
自己動手試一試 »
注意，在示例中，當您將瀏覽器視窗調整為非常小的寬度時，網頁看起來並不好。在下一章中，您將學習如何解決這個問題。
