最新的Web開發教程
 

自適應網頁設計 - 網格視圖


什麼是網格視圖?

許多網頁是基於網格的圖,這意味著該頁面被分為列:


使用網格視圖設計網頁的時候非常有幫助。 它可以更容易地放置在頁面上的元素。


回應式網格視圖通常有12列,並擁有100%的總寬度,並縮小和擴大,因為你調整瀏覽器窗口。

響應網格視圖


建立一個響應網格視圖

讓我們開始建設一個負責任的網格視圖。

首先確保所有的HTML元素都具有box-sizing屬性設置為border-box 。 這可以確保在填充和邊界都包含在元素的總寬度和高度。

添加以下代碼在你的CSS:

* {
    box-sizing: border-box;
}

了解更多關於box-sizing在我們的財產CSS3框大小調整的篇章。

下面的例子顯示了一個簡單響應的網頁,有兩列:

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}
試一試»

上面的例子是好的,如果該網頁只包含兩列。

但是,我們要使用一個負責任的網格視圖有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>
  <div class="col-9">...</div>
</div>

一行內的列都浮動到左側,並且因此取出頁的流動,和其他元素將被放入彷彿列不存在。 為了防止這種情況,我們將添加清除流動的風格:

CSS:

.row::after {
    content: "";
    clear: both;
    display: block;
}

我們還需要添加一些的款式和顏色,使其更好看:

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;
}
試一試»

注意,當您調整瀏覽器窗口,以非常小的寬度在例如網頁不好看。 在下一章中,您將學習如何解決這個問題。