響應(yīng)式設(shè)計
在談?wù)摉鸥裣到y(tǒng)之前沮榜，我們先了解一下盘榨，響應(yīng)式設(shè)計。簡單來說蟆融，我們在設(shè)計的頁面的時候草巡，并不知道我們的頁面會在什么設(shè)備呈現(xiàn)，為了在不同的設(shè)備上有最好的呈現(xiàn)效果型酥，我們需要作出一些響應(yīng)和調(diào)整山憨。
響應(yīng)式 Web 設(shè)計（Responsive Web design）的理念是，頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺弥喉、屏幕尺寸郁竟、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。
響應(yīng)式設(shè)計有幾個比較重要的點由境，包括：
-
viewport：讓頁面寬度等于設(shè)備寬度 - 流式布局：百分比和浮動
-
@media：斷點
柵格系統(tǒng)
為了能夠更好的使用響應(yīng)式設(shè)計棚亩，柵格系統(tǒng)應(yīng)運而生。通過柵格系統(tǒng)虏杰，可以在切分的網(wǎng)格里按順序疊加不同的寬度蔑舞，并且易于管理。這樣做的好處是顯而易見的：
- 提高生產(chǎn)力嘹屯，通過在網(wǎng)格的劃分，元素更容易堆放而且在跨瀏覽器上面具有一致性从撼，使我們可以專心的注意布局而不是兼容上州弟。
- 具有靈活性，無論是什么樣的布局低零，都可以拆分到粒度為一個網(wǎng)格的大小婆翔。
- 支持響應(yīng)式設(shè)計，柵格系統(tǒng)本身能很好的和響應(yīng)式設(shè)計結(jié)合在一起掏婶，或者說啃奴，我們的柵格系統(tǒng)是基于響應(yīng)式設(shè)計的。
柵格系統(tǒng)的實現(xiàn)
Container
一個用于擺放柵格系統(tǒng)的容器雄妥。通常我們希望這個容器占滿整個整個頁面最蕾，除非顯示設(shè)備特別大依溯，這個時候定一個最大寬度，則
.container {
width: 100%;
max-width : 1200px;
}
Row
用于防止里面的列（ column ）溢出到其他的行瘟则。通常會需要清除浮動黎炉，因為我們是通過浮動來制作柵格系統(tǒng)的。
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
Column
柵格系統(tǒng)的核心醋拧，規(guī)定了列的寬度慷嗜，位置和間隔。而在此之前丹壕，我們需要規(guī)定所有的盒子模型為 border-box 類型庆械，這樣做的原因是避免繁瑣的計算和更簡單的分列。（當(dāng)然你也可以讓頁面上所有的盒子模型都設(shè)置為 border-box菌赖。）
.container * {
box-sizing: border-box
}
這里我們把每一行分成 6 列缭乘，通過將其設(shè)置為浮動且百分比，能夠很好的制作響應(yīng)式頁面盏袄。
[class *= 'col-'] {
float: left;
min-height: 1px;
padding: 12px; /* 設(shè)置間距 */
}
.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%; }
Responsive
到此為止忿峻，我們的柵格系統(tǒng)已經(jīng)設(shè)置的差不多了，為了支持響應(yīng)式設(shè)計辕羽，參考 boostrap 的設(shè)置逛尚，我們可以給不同列設(shè)置不同的斷點，這里以實現(xiàn) md 和 sm 兩種界限為例子：
@media all and (min-width: 769px) {
.col-md-1 { width: 16.66%; }
.col-md-2 { width: 33.33%; }
.col-md-3 { width: 50%; }
.col-md-4 { width: 66.664%; }
.col-md-5 { width: 83.33%; }
.col-md-6 { width: 100%; }
}
@media all and (max-width: 768px) {
.col-sm-1 { width: 16.66%; }
.col-sm-2 { width: 33.33%; }
.col-sm-3 { width: 50%; }
.col-sm-4 { width: 66.664%; }
.col-sm-5 { width: 83.33%; }
.col-sm-6 { width: 100%; }
}
