制作簡(jiǎn)約CSS柵欄布局
眾所周知，Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)元潘，隨著顯示屏幕或視口的改變，自動(dòng)改變相應(yīng)的布局君仆。
作者在前段時(shí)間用過(guò)bootstrap框架翩概，印象最深刻，使用最頻繁的便是這柵欄布局返咱，但如果僅僅是為了使用這個(gè)柵欄布局就引入一個(gè)框架钥庇，這明顯是非常不明智的，所以便根據(jù)bootstrap框架做了一個(gè)簡(jiǎn)約的柵欄布局咖摹。
柵欄系統(tǒng)的組成：
1.container 包裹柵欄的容器
2.row 行
3.column 列
首先评姨，這個(gè)柵欄系統(tǒng)需要一個(gè)總的容器，這樣column（列）才能用百分比設(shè)置寬高萤晴。
.container{
width:100%;
max-width:1366px;
padding:015px;
}
這里為容器（container）添加一個(gè)左右padding吐句，是為了防止內(nèi)容碰觸瀏覽器邊緣胁后。
接下來(lái)是行（row）
行元素用于防止里面的列（ column ）溢出到其他的行，接下來(lái)的列（column）將會(huì)使用浮動(dòng)布局嗦枢，所以在row中要清楚浮動(dòng)攀芯，這里，我們采用偽類里添加clear：both
.row:before,.
row:after{
content:" ";
display:table;
clear:both;
}
.row{margin:0-15px;}
為row（行）添加margin-left：-15px 和 margin-right：-15px 用來(lái)抵消container中的padding文虏，使background侣诺、border等屬性可以覆蓋到瀏覽器邊緣。
最后是列（column）
我們先為列設(shè)置最基本的樣式
[class*='col-']{
position:relative;
float:left;
min-height:1px;
padding:0 15px;
}
這里我們把一行（row）分成12列择葡，通過(guò)簡(jiǎn)單的計(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;
}
這樣就可以避免一次次的加減，避免寬度過(guò)大而換行的問(wèn)題了朋鞍。
為列設(shè)置偏移量
.col-offset-12 {
margin-left: 100%;
}
.col-offset-11 {
margin-left: 91.66666667%;
}
.col-offset-10 {
margin-left: 83.33333333%;
}
之后代碼以此類推已添。
這樣，一個(gè)柵欄系統(tǒng)就完成了滥酥！可以寫一個(gè)簡(jiǎn)單的樣例進(jìn)行測(cè)試更舞。
研究了半天，不知道怎么放HTML代碼...大家自己測(cè)驗(yàn)下吧~
最后坎吻，為柵欄系統(tǒng)設(shè)置響應(yīng)式布局
響應(yīng)式布局是利用HTML5的media查詢來(lái)查詢屏幕寬度缆蝉，進(jìn)而進(jìn)行CSS的修改。
這里瘦真，當(dāng)我們的屏幕寬度小于960px時(shí)刊头，我們采用兩倍列的寬度，即兩列變一列：
@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%;}
這樣诸尽，一個(gè)基本的柵欄系統(tǒng)就完成了原杂，當(dāng)然你還可以根據(jù)媒體查詢，查詢屏幕寬度小于640您机，320等穿肄，這些就不再重復(fù)累贅。
