談?wù)勴憫?yīng)式網(wǎng)站前端設(shè)計(jì)

一段時(shí)間之前我對(duì)響應(yīng)式的概念還是Bootstrap、Amaze之類的框架組件，用過(guò)幾次也不以為然，我想國(guó)內(nèi)搜索引擎在提供移動(dòng)搜索結(jié)果頁(yè)時(shí)還是會(huì)給移動(dòng)網(wǎng)站加分的，卻不能像google一樣識(shí)別響應(yīng)式網(wǎng)站，可能還需要一段時(shí)間發(fā)展。但毫無(wú)疑問(wèn)的是現(xiàn)在Web趨勢(shì)轉(zhuǎn)向移動(dòng)優(yōu)先，當(dāng)然如果你用域名或者其他解決方案也不是不可以，只是響應(yīng)式可能更簡(jiǎn)單一些，發(fā)展前景也是不錯(cuò)的。

這兩三個(gè)星期我每天都在寫響應(yīng)式頁(yè)面，借此累積了不少響應(yīng)式頁(yè)面和ajax的經(jīng)驗(yàn)。我大致的梳理了幾個(gè)響應(yīng)式頁(yè)面的重點(diǎn)，如果想往這方面發(fā)展或是對(duì)它有些興趣，希望能給大家一點(diǎn)幫助。

控制大小

習(xí)慣了PC頁(yè)面的前端開發(fā)者可能更加喜歡用pc來(lái)控制大小，但在響應(yīng)式的頁(yè)面中出現(xiàn)更多的是em和rem，用它們來(lái)控制字體大小甚至是框體大小對(duì)整體的效果非常明顯。

打個(gè)比方，我的字體設(shè)置是10px/20px/30px等等不同的，網(wǎng)站上不同的地方自然字體會(huì)有大小的差異這是必然的，如果一個(gè)頁(yè)面足夠復(fù)雜或是文字足夠多的話，這些字體的大小設(shè)置也是一個(gè)量很大的工作，不過(guò)在響應(yīng)式頁(yè)面中你設(shè)計(jì)完它們并不是完事：你用手機(jī)瀏覽一下頁(yè)面會(huì)發(fā)現(xiàn)字體會(huì)撐的很大，甚至有個(gè)別標(biāo)題撐滿了手機(jī)屏幕，這對(duì)移動(dòng)端用戶的體驗(yàn)影響可想而知。因此你要開始寫媒體查詢，然后發(fā)現(xiàn)一個(gè)頁(yè)面有幾十個(gè)字體需要設(shè)置，如果把它們?cè)诓煌直媛氏乱灰徽{(diào)整你可能需要寫百句以上的css代碼，但如果你用em/rem，就能夠把工作量大大減小，同時(shí)還能夠保證字體的統(tǒng)一比例。

關(guān)于em/rem的解釋大家可以自行搜索，網(wǎng)上這類教程數(shù)不勝數(shù)，實(shí)際上它們就和px一樣簡(jiǎn)單，當(dāng)我開始用之后也不過(guò)只花了幾分鐘熟悉它們。就像前面說(shuō)的一樣，你也可以用它們來(lái)控制框體的大小，然后再響應(yīng)式的頁(yè)面下統(tǒng)一縮放，當(dāng)然這需要足夠多的計(jì)算。另外值得一提的是字體圖標(biāo)也可以用它們來(lái)控制，具體可以參考不同“字體圖標(biāo)”的官方文檔。

百分比

解決縮放問(wèn)題的思路有好幾種，最適合新手的無(wú)疑是百分比式的布局，在關(guān)鍵的寬度設(shè)置下百分比能夠起到出乎意料的效果：

box1{ width:100%;}

ul{ margin:0 2%;}

我并不是推崇全部使用百分比來(lái)布局，但有時(shí)候這可能會(huì)大大減少工作量，給box1寬度設(shè)置100%之后它會(huì)自動(dòng)以寬度填充滿整個(gè)瀏覽器，不管你是手機(jī)PC什么分辨率，它總是有很好的表現(xiàn)。這時(shí)候你給box1下面的ul設(shè)置左右2%的margin也是如此，隨著瀏覽器窗口大小改變時(shí)ul的實(shí)際margin大小也會(huì)隨著變化，這么一說(shuō)大家多少也都理解了百分比布局的概念。

當(dāng)然有時(shí)候也不會(huì)有想象中的效果，特別是在較小的分辨率上時(shí)，原來(lái)看似不錯(cuò)的百分比設(shè)定會(huì)顯得很怪，因?yàn)轫憫?yīng)式多數(shù)時(shí)候只約定寬度，長(zhǎng)度都是由文檔和瀏覽器來(lái)決定的，這時(shí)候想要在所有的終端上都有很好的體驗(yàn)就需要Media Query來(lái)解決問(wèn)題。

Media Query

通俗的解釋就是CSS的媒體查詢功能，它既能夠準(zhǔn)確的識(shí)別設(shè)備也能夠自己設(shè)定分辨率或者寬度，w3cshool里有Media Query的參考文檔，如果你嫌文檔太多我可以粗略的解釋一下它的工作原理。

在有必要的時(shí)候你可能會(huì)給一個(gè)box設(shè)置高度，當(dāng)box擁有500px高度時(shí)它可能在PC上看起來(lái)不錯(cuò)，但用手機(jī)打開時(shí)就有些嚇人了，整個(gè)box充斥了頁(yè)面，里面的內(nèi)容排列混亂，嚴(yán)重的影響了用戶體驗(yàn)，這時(shí)候你就可以使用媒體查詢Media Query，用它單獨(dú)的為不同大小的設(shè)置不同的高度，比如640/320打開時(shí)box時(shí)就分別處于300/200px的高度，這樣看起來(lái)就不錯(cuò)了。

大家可能會(huì)想到import，實(shí)際上媒體查詢就可以這樣理解，它為不同的寬度或設(shè)備設(shè)定了類似于import的css規(guī)則，保證了實(shí)際渲染完成頁(yè)面的效果。

媒體查詢也可以為一個(gè)頁(yè)面準(zhǔn)備多個(gè)不同的CSS，當(dāng)設(shè)備大小不同時(shí)使用不同的CSS文件，如果樣式文件比較大也可以考慮這種方法。

說(shuō)說(shuō)框架

我見到過(guò)和實(shí)際使用的前端框架中，不少都是富前端類型的設(shè)計(jì)，并不建議新手前端盲目的使用框架來(lái)布局，不管框架看起來(lái)多美好。在實(shí)際的使用過(guò)程中大家可能會(huì)發(fā)現(xiàn)很多問(wèn)題，比如類名太多太復(fù)雜（在沒(méi)有很多的css經(jīng)驗(yàn)時(shí)可能對(duì)約定的類名所知甚少）、樣式?jīng)_突。引入資源過(guò)多導(dǎo)致頁(yè)面繁重、偏離設(shè)計(jì)效果等等。

就拿bootstrap來(lái)說(shuō)，如果你要設(shè)計(jì)一個(gè)類似于google的搜索框就顯得很難，google類型的搜索框?qū)嶋H上是將一個(gè)input包含在box里面，然后在這個(gè)box里面再加上左右圖標(biāo)，如果你用bootstrap來(lái)做可能會(huì)出現(xiàn)很多莫名奇妙的沖突，但實(shí)際上你得到了什么呢？一個(gè)圓角一個(gè)行高？還是他的百分比寬度呢？這些用css來(lái)寫只不過(guò)是幾句代碼的事。

還有一些框架過(guò)度的依賴AJAX，它們也許想法很好，大量的AJAX在前端看起來(lái)的確很酷，對(duì)用戶的友好性也足夠強(qiáng)，但大量的請(qǐng)求對(duì)服務(wù)器并不友好，可能會(huì)使服務(wù)器的實(shí)際負(fù)載大大下降。總之還是一句話，按實(shí)際需求來(lái)解決問(wèn)題，框架并不是萬(wàn)能的。

注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請(qǐng)移步到建站教程頻道。