隨著css3的誕生，近幾年web響應(yīng)式布局越發(fā)流行，雖然從電腦端到手機(jī)端的響應(yīng)式布局。在正真的用戶使用上作用不大（個(gè)人覺(jué)得絕大多數(shù)人不會(huì)把瀏覽器從大屏顯示狀態(tài)要縮小到近似手機(jī)大小的尺寸去使用）。不過(guò)確實(shí)在電腦端根據(jù)不同大小的屏幕，給出不同的內(nèi)容尺寸寬度還是能提升一定的用戶體驗(yàn)的。

由于本人所在公司的老板特別喜歡響應(yīng)式布局，決定要從電腦端響應(yīng)到手機(jī)版時(shí)，應(yīng)該有不少草泥馬在頁(yè)面仔們內(nèi)心飄過(guò)。其實(shí)身為半個(gè)頁(yè)面仔的我，也是覺(jué)得不是很有必要這樣做。因?yàn)槲覀兊漠a(chǎn)品在后端渲染時(shí)，已經(jīng)做了終端設(shè)備的判斷，根據(jù)不同設(shè)備渲染不同的界面。但是老是聽(tīng)人講Apple的頁(yè)面多少好，人家隨便拉伸會(huì)自動(dòng)響應(yīng)布局，內(nèi)心還是想證明咱們的頁(yè)面仔也是可以的！然后就開(kāi)始了前端小團(tuán)隊(duì)的自適應(yīng)布局入坑作業(yè)。

在大多數(shù)“外行人”的眼里，不就是多寫幾行代碼把桌面版和移動(dòng)版的樣式寫寫一起么。特別是有Bootstrap這樣的前端樣式框架出現(xiàn)，更加讓他們?nèi)绱苏J(rèn)為。不過(guò)話說(shuō)回來(lái)，真要是就遵循Bootstrap的柵格布局來(lái)設(shè)計(jì)的話，那到確實(shí)是輕松加愉快啊。雖然過(guò)程中會(huì)比單寫一個(gè)尺寸的要多考慮一些，但是真心不會(huì)增加很大精力去模塊布局?？赏屡c愿違啊，設(shè)計(jì)的稿子完全不是這么來(lái)的。布局不是左右分明可以12柵格的，背景也不是內(nèi)容劇中外圍純色的等等。一系列的問(wèn)題，導(dǎo)致前端剛開(kāi)始做沒(méi)多久就開(kāi)始跟我訴苦了。由于開(kāi)發(fā)時(shí)間相對(duì)較短，確實(shí)前端也有些壓力。然后身為半個(gè)頁(yè)面仔的我，開(kāi)始分擔(dān)前端頁(yè)面工作。

廢話講到這里，接下來(lái)進(jìn)入正題。響應(yīng)式布局主要是通過(guò)css3的media來(lái)根據(jù)瀏覽器的寬度來(lái)起效對(duì)應(yīng)的樣式。我們最常使用的就是max-width和min-width來(lái)當(dāng)作媒體查詢的判斷條件了。例如@media (max-width: 768px){...}，表示在瀏覽器最大寬度小于等于768px時(shí)，大括號(hào)內(nèi)的樣式生效。min-width則表示是大于等于對(duì)應(yīng)值時(shí)樣式生效。由于適配到移動(dòng)端，那么在header里就加上一段<meta name="viewport" content="width=device-width, initial-scale=1"/>來(lái)適配。那么如果我們將要做桌面、平板、手機(jī)三個(gè)尺寸的話，假設(shè)分界點(diǎn)為768px、992px（小于768px為手機(jī)，大于等于768px為平板、大于等于992px為桌面）。那么假設(shè)為移動(dòng)端優(yōu)先的話，Bootstrap就是以移動(dòng)端優(yōu)先。那么默認(rèn)的移動(dòng)端樣式，就不需要添加媒體查詢。示例樣式代碼如下：

/*手機(jī)或者不支持媒體查詢的瀏覽器，顯示class有btn的按鈕寬度為60px*/
.btn{width: 60px;display: block;height: 30px;}
@media(min-width: 768px){
  /*平板下顯示寬度為80px*/
  .btn{width: 80px;}
}
@media(min-width: 992px){
  /*桌面下顯示寬度為100px*/
  .btn{width: 100px;}
}

到此為止已經(jīng)知道如何使用css的媒體查詢功能，編寫對(duì)應(yīng)不同屏幕尺寸的樣式。但要真要比較好的實(shí)現(xiàn)響應(yīng)式布局還是沒(méi)有這么簡(jiǎn)單。如果沒(méi)有在設(shè)計(jì)之時(shí)就考慮如何來(lái)做響應(yīng)式布局，而只是為了到達(dá)響應(yīng)式而去做的話；那么往往就變成了就是把多種尺寸的頁(yè)面整到同一個(gè)頁(yè)面里面，利用媒體查詢來(lái)控制哪個(gè)頁(yè)面該顯示罷了。個(gè)人認(rèn)為這種形式完成的響應(yīng)式，完全就是為了完成響應(yīng)式的炫酷而已。實(shí)際上，并沒(méi)有給開(kāi)發(fā)上或者用戶體驗(yàn)上帶來(lái)多少好處和提升。首先，大多數(shù)用戶并不會(huì)刻意的去放縮瀏覽器來(lái)刻意查看響應(yīng)式效果。其次，這種做法在DOM結(jié)構(gòu)上，往往是不可復(fù)用。那么以這樣的形式完成的頁(yè)面，只會(huì)增加前端開(kāi)發(fā)的復(fù)雜性；以及用戶在訪問(wèn)網(wǎng)頁(yè)的時(shí)候，帶來(lái)更多的流量消耗。當(dāng)然為了很好的解決這種情況，像Bootstrap的思想和實(shí)現(xiàn)方式就比較好了。最明顯的就在于柵格化布局，如：大屏幕左右布局，到小屏幕下成左邊在上、右邊在下的布局。那么如果在這樣的規(guī)范下去進(jìn)行設(shè)計(jì)，那么DOM結(jié)構(gòu)將能得到很大程度的復(fù)用。開(kāi)發(fā)基本上可以使用一套DOM結(jié)構(gòu)，給不同的模塊賦予多種尺寸下對(duì)應(yīng)的class來(lái)控制布局。如此一來(lái)，開(kāi)發(fā)復(fù)雜度降低；代碼復(fù)用度變高，用戶訪問(wèn)時(shí)流量消耗也會(huì)幅度下降。那么總結(jié)上述來(lái)說(shuō)，要很好的完成響應(yīng)式布局，將不只是前端開(kāi)發(fā)可以完成的；要在設(shè)計(jì)上就考慮出符合網(wǎng)頁(yè)布局邏輯的響應(yīng)式界面，再加上前端將其優(yōu)美的轉(zhuǎn)換成前端代碼；如此，才能比較完美的完成響應(yīng)式布局。

可以說(shuō)現(xiàn)在很多做了響應(yīng)式布局的網(wǎng)站，就算沒(méi)有直接使用Bootstrap，但很容易看出柵格布局等思想還是大同小異。如今很多公司招前端也都將Bootstrap列入了要求的技能項(xiàng)，做前端開(kāi)發(fā)和設(shè)計(jì)的，不妨參考一下Bootstrap。