響應式網格系統
響應式網格系統的概念
- 把網頁划分成列、行、外邊距、隔離帶（各列與各行之間的空白）等由一系列相交的水平軸和垂直軸組成的網格。
- 網格布局的作用在於更有效地控制元素在網頁中所占比例的大小。比如，博客中有一個留言板模塊，在比較大的屏幕上，我們希望它占了右邊 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%; } }
實例應用
