響應式網格系統 ======================================== 響應式網格系統的概念把網頁劃分成列、行、外邊距、隔離帶（各列與各行之間的空白）等由一系列相交的水平軸和垂直軸組成的網格。網格佈局的作用在於更有效地控制元素在網頁中所占比例的大小。比如，博客中有一個留 ...

響應式網格系統

響應式網格系統的概念

把網頁劃分成列、行、外邊距、隔離帶（各列與各行之間的空白）等由一系列相交的水平軸和垂直軸組成的網格。
網格佈局的作用在於更有效地控制元素在網頁中所占比例的大小。比如，博客中有一個留言板模塊，在比較大的屏幕上，我們希望它占了右邊 25% 的寬度，在手機等比較小的屏幕上，我們希望它占 100% 的寬度，出現在博客文章下方。網格佈局是一種實現這一需求的辦法，它的好處是，把所有的寬度分為固定欄數（常用 12 欄），從而更高效的控制元素寬度。

響應式系統的基本構成

通過BootStrap 官網可以更加詳細地瞭解響應式網格是如何實現的，通常主體部分由以下構成：

container
rows
columns
gutter(列與列之間的空白)
breakpoint(通過media query實現響應式)

創建網格系統之前需要知道的事情

1.應該使用等寬的列嗎？

按理來說，我們可以使用等寬的列或不等寬列來劃分網格，這要決定於我們的網頁複雜程度，一般都是使用等寬列，更加靈活和實用，像Bootstrap框架，通過元素所占的列數很方便計算出元素的寬度。

2.應該使用多少列？

如上圖，我們可以使用8欄、10欄、12欄都可以，通常取決於設計圖的佈局類型和內容，如一列、兩列、三列佈局等，如果不清楚佈局類型和內容的話，一般使用靈活的12欄佈局。

3.應該設置多大的列寬和間距？

解法一：由上而下，例如容器寬度為1140px,gutter為20px，則列寬為)1140px / 12 -20px。（通常使用這種方法）
解法二：由下往上，通常列寬設為間距的倍數，如gutter為20px，則列寬為60px。

4.如何讓網格適應不同視窗的大小？

隨著用戶代理的大小變化，列寬和間距需要在斷點處breakpoint做出相應的改變以得到更好的視覺體驗。
列寬使用百分數，而間距gutter固定的大小px或rem。如Bootstrap

/* Bootstrap */
.col-md-4 {
  width: 33.33333%;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

5.是否使用預置類？

使用預定類col-*（HTML grid systems），直接在html結構里添加
```
<div class="row">
    <div class="col-md-8 col-lg-6"></div>
    <div class="col-md-4 col-lg-6"></div>
</div>
```
- 優點：直觀、直接知道多少元素所占的列數
- 缺點：HTML結構膨脹，需要預先知道佈局
不使用預定義類（CSS grid systems)
```
<div class="content"></div>
<div class="sidebar"></div>
```
- 優點：可維護性強、不用更改HTML、直接在CSS指定樣式
- 缺點：不夠直觀

使用第二種維護性好，應用性更強，當需求更改的時候，不用直接更改HTML的類名。詳細點擊這裡響應式的話，應該使用相對單位rem或em替代px。

.l-guest-article {
  @include clearfix;
  .l-main {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      margin-top: 0;
      float: left;
    }
  }
  .l-sidebar {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      float: right;
    }
  }
}

開始創建你自己的響應式網格系統

下麵開始構建響應式網格系統，理解Boostrap網格系統是如何實現的。
在開始構建容器之前，需要對所有容器設置box-sizing屬性,以免後期設置邊框或間距的時候影響了元素的大小。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

1.Grid container

.grid-container {
    width: 100%;
    max-width: 1200px; /*這裡根據實際情況是否設置*/
    margin-right: auto;
    margin-left: auto;
}

2.Rows

因為對每一列設置了浮動，所以容器row需要清理浮動。

 /*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
     clear:both;
}

3.Columns

這裡的列寬度，取決於你設定的網格欄數，如6欄，則每一欄大約為1/6。此處沒有減去gutter的大小。

 [class*='col-'] {
    float: left;
    min-height: 1px; 
    width: 16.66%; 
}

現象：浮動列為空的時候水平方向上發生摺疊現象。
原因：height: 0，width不為0的時候）float帶來的影響。
解決：列本身設有border或padding，否則需要設置min-height: 1px。

如果要預定義多個類的話，類似Bootstrap這樣

.col-1{
    width: 16.66%; 
}
.col-2{
    width: 33.33%; 
}
.col-3{
    width: 50%; 
}
.col-4{
    width: 66.664%;
}
.col-5{
    width: 83.33%;
}
.col-6{
    width: 100%;
}

4.gutter的處理

one-sided gutter
- margin-right(需要額外處理最後一個邊距的問題)
```
/* For a 3-column grid */
.grid-item:nth-child(3n+3) {
    margin-right: 0;
    float: right;
}
```
- padding-right（造成最後一個元素的寬度比前面的小，因為設置了box-sizing: border;）
Split gutters(使用這種方法就能避免以上的問題)
- marging-left 和 margin-right（需要使用calc減去gutter的大小）
```
.grid-item {
  width: calc((100% - 20px * 3) / 3);
  margin-right: 10px;
  margin-left: 10px;
  float: left;
}
```
  - 優點：HTML結構簡潔，不需要額外的子元素。
  - 缺點：IE9+，比較麻煩，要設置col-1~col-12每列都要這樣設置，CSS代碼冗餘，而且改動邊距的話需要全改。
- padding-left 和 padding-right，需要在HTML結構列加入額外子元素。
```
 <div class="row">
    <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
    <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
    <div class="col-md-4 col-sm-12"><div class="inner"></div></div>
</div>

[class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}
```
  - 優點：CSS代碼：直接是分數，簡潔，無需減去gutter。因為這是在容器col裡面設置內邊距。
  - 缺點：需要額外的子元素

5.make your layouts responsive

通過設置利用media設置斷點

這裡沒有使用預定義類。

.l-guest-article {
  @include clearfix;
  .l-guest {
    @media (min-width: 700px) {
      width: percentage(4/12);
      float: left;
    }

    @media (min-width: 1200px) {
      width: percentage(2/12);
    }
  }
  .l-main {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      margin-top: 0;
      float: left;
    }
    @media (min-width: 1200px) {
      width: percentage(7/12);
    }
  }
  .l-sidebar {
    margin-top: 20px;
    @media (min-width: 700px) {
      width: percentage(8/12);
      float: right;
    }
    @media (min-width: 1200px) {
      width: percentage(3/12);
      margin-top: 0;
    }
  }
}

使用預定義類，一樣的道理通過媒體查詢,然後把需要的類添加到HTML結構即可。

@media all and (max-width: 768px) {
    .col-sm-1 {
        width: 8.33%;
    }

    .col-sm-2 {
        width: 16.66%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.33%;
    }

    .col-sm-5 {
        width: 41.66%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-7 {
        width: 58.33%;
    }

    .col-sm-8 {
        width: 66.66%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-10 {
        width: 83.33%;
    }

    .col-sm-11 {
        width: 91.66%;
    }

    .col-sm-12 {
        width: 100%;
    }
}

實例應用

Demo

響應式網格（柵格化）佈局

響應式網格系統