制作簡約CSS柵欄布局
眾所周知，Bootstrap內(nèi)置了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著顯示屏幕或視口的改變，自動改變相應(yīng)的布局。
作者在前段時間用過bootstrap框架，印象最深刻，使用最頻繁的便是這柵欄布局，但如果僅僅是為了使用這個柵欄布局就引入一個框架，這明顯是非常不明智的，所以便根據(jù)bootstrap框架做了一個簡約的柵欄布局。
柵欄系統(tǒng)的組成：
1.container 包裹柵欄的容器
2.row 行
3.column 列
首先，這個柵欄系統(tǒng)需要一個總的容器，這樣column（列）才能用百分比設(shè)置寬高。
.container{
width:100%;
max-width:1366px;
padding:015px;
}
這里為容器（container）添加一個左右padding，是為了防止內(nèi)容碰觸瀏覽器邊緣。
接下來是行（row）
行元素用于防止里面的列（ column ）溢出到其他的行，接下來的列（column）將會使用浮動布局，所以在row中要清楚浮動，這里，我們采用偽類里添加clear：both
.row:before,.
row:after{
content:" ";
display:table;
clear:both;
}
.row{margin:0-15px;}
為row（行）添加margin-left：-15px 和 margin-right：-15px 用來抵消container中的padding，使background、border等屬性可以覆蓋到瀏覽器邊緣。
最后是列（column）
我們先為列設(shè)置最基本的樣式
[class*='col-']{
position:relative;
float:left;
min-height:1px;
padding:0 15px;
}
這里我們把一行（row）分成12列，通過簡單的計(jì)算就可得出每行的寬度：
.col-12{
width:100%;
}
.col-11{
width:91.66666667%;
}
.col-10{
width:83.33333333%;
}
.col-9{
width:75%;
}
.col-8{
width:66.66666667%;
}
.col-7{
width:58.33333333%;
}
.col-6{
width:50%;
}
.col-5{
width:41.66666667%;
}
.col-4{
width:33.33333333%;
}
.col-3{
width:25%;
}
.col-2{
width:16.66666667%;
}
.col-1{
width:8.33333333%;
}
由于列（column）的寬度單位為響應(yīng)式的%，我們又設(shè)有左右padding，所以為了防止復(fù)雜的計(jì)算，我們把container中的所有元素都設(shè)：box-sizing: border-box;
.container*{
box-sizing:border-box;
}
這樣就可以避免一次次的加減，避免寬度過大而換行的問題了。
為列設(shè)置偏移量
.col-offset-12 {
margin-left: 100%;
}
.col-offset-11 {
margin-left: 91.66666667%;
}
.col-offset-10 {
margin-left: 83.33333333%;
}
之后代碼以此類推。
這樣，一個柵欄系統(tǒng)就完成了！可以寫一個簡單的樣例進(jìn)行測試。
研究了半天，不知道怎么放HTML代碼...大家自己測驗(yàn)下吧~
最后，為柵欄系統(tǒng)設(shè)置響應(yīng)式布局
響應(yīng)式布局是利用HTML5的media查詢來查詢屏幕寬度，進(jìn)而進(jìn)行CSS的修改。
這里，當(dāng)我們的屏幕寬度小于960px時，我們采用兩倍列的寬度，即兩列變一列：
@mediaall and (max-width:960px){
.col-12{
width:100%;
}
.col-11{
width:100%;
}
.col-10{
width:100%;
}
.col-9{
width:100%;
}
.col-8{
width:100%;
}
.col-7{
width:100%;
}
.col-6{
width:100%;
}
.col-5{
width:83.33333333%;
}
.col-4{
width:66.66666667%;
}
.col-3{
width:50%;
}
.col-2{
width:33.33333333%;
}
.col-1{width:16.66666667%;}
這樣，一個基本的柵欄系統(tǒng)就完成了，當(dāng)然你還可以根據(jù)媒體查詢，查詢屏幕寬度小于640，320等，這些就不再重復(fù)累贅。
