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

時間 2019-11-17

標籤響應網格柵格佈局简体版

原文原文鏈接

響應式網格系統

響應式網格系統的概念

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

響應式系統的基本構成

經過BootStrap 官網能夠更加詳細地瞭解響應式網格是如何實現的，一般主體部分由如下構成：
css

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

建立網格系統以前須要知道的事情

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

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

2.應該使用多少列？

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

bootstrap

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結構裏添加ide
```
<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。flex

.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屬性,以避免後期設置邊框或間距的時候影響了元素的大小。ui

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須要清理浮動。flexbox

/*-- 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%;
      }
  }