響應(yīng)式網(wǎng)站的布局有哪些優(yōu)缺點(diǎn)？

關(guān)于響應(yīng)式網(wǎng)站，想必大家已經(jīng)非常熟悉。通俗的解釋就是使用CSS媒體查詢技術(shù)，寫一套代碼，可以在多個(gè)終端上使用。在此之前，前端切圖工作者是需要分別針對(duì)電腦端、移動(dòng)端和平板等常見(jiàn)設(shè)備專門去寫一套代碼的，工作量相對(duì)較大。但是，千萬(wàn)不能以為響應(yīng)式是最佳的解決方案，事實(shí)上響應(yīng)式只是一個(gè)折中的技術(shù)解決方案，他在為我們帶來(lái)便利性的同時(shí)，也存在很多其他問(wèn)題。接下來(lái)，本文就詳細(xì)的分析響應(yīng)式布局的優(yōu)缺點(diǎn)。

一、響應(yīng)式布局的優(yōu)點(diǎn)

1、開(kāi)發(fā)效率高

雖然也有人說(shuō)響應(yīng)式開(kāi)發(fā)成本較高的，但是要看相對(duì)參照，響應(yīng)式的頁(yè)面開(kāi)發(fā)，總歸是要比單獨(dú)針對(duì)電腦端和移動(dòng)端分別開(kāi)發(fā)更容易一些的。

2、維護(hù)方便

在維護(hù)的時(shí)候，響應(yīng)式布局只需維護(hù)一套代碼，而單獨(dú)的移動(dòng)端和電腦端，甚至還有平板，則需要維護(hù)多套代碼。

3、不同分辨率下顯示靈活

至于有人說(shuō)在不同分辨率下顯示靈活性強(qiáng)，我覺(jué)的這點(diǎn)本身就是響應(yīng)式存在的意義，因此不需要說(shuō)，而且也存在很多替代方案。

二、響應(yīng)式布局的缺點(diǎn)

1、代碼量冗余

比如說(shuō)，單獨(dú)的電腦端和移動(dòng)端，在使用某一終端的時(shí)候，只需要加載其中一套代碼即可，但是響應(yīng)式實(shí)際是把所有的代碼放在一起的，這樣的結(jié)果就是在訪問(wèn)電腦端的時(shí)候，實(shí)際上加載的還是全部的樣式、圖片、html框架文件，代碼量較冗余，每次加載文件體積較大。

但是有句話說(shuō)的好，拋開(kāi)劑量談危害，是耍流氓。在目前網(wǎng)絡(luò)帶寬越來(lái)越高的情況下，多加載幾十幾百KB的文件，對(duì)用戶幾乎是無(wú)感的，所以這點(diǎn)其實(shí)算不上什么大的缺點(diǎn)。除非是網(wǎng)站的訪問(wèn)量特別大的情況下。

2、個(gè)性化度較低

眾所眾知，響應(yīng)式是所有的終端使用了同一套HTML代碼，然后通過(guò)媒體查詢方式，修改布局，部分元素在某個(gè)終端下進(jìn)行隱藏或顯示處理的。這樣勢(shì)必會(huì)造成的一個(gè)結(jié)果就是，電腦端和移動(dòng)端的模塊幾乎是一致的，從而導(dǎo)致想要在某一終端下想要做更加個(gè)性化的操作就不是很容易，當(dāng)然不是說(shuō)不可以，只是略顯累贅。

3、加載統(tǒng)一資源

比如說(shuō)電腦端的輪播Banner圖，我們一般都會(huì)使用精度比較高，顯示清晰的1920像素寬度的圖片，但是在移動(dòng)端的時(shí)候，再使用這么精細(xì)的圖片，肯定不是最佳解決方案。當(dāng)然也可以通過(guò)css填充背景的方式來(lái)加載不同資源，但是這種操作較為猥瑣，一般不用。

4、用戶體驗(yàn)一般

以上幾點(diǎn)共同決定了響應(yīng)式在用戶體驗(yàn)方面，是遜色于各終端獨(dú)立開(kāi)發(fā)的。

5、SEO可能稍有影響

另外，有人說(shuō)響應(yīng)式布局的SEO效果會(huì)比單獨(dú)版本的高一些，但是這點(diǎn)其實(shí)并沒(méi)有多少案例和數(shù)據(jù)支撐，在移動(dòng)端適配方面，目前看來(lái)影響應(yīng)該是微乎其微。百度的站長(zhǎng)搜索資源平臺(tái)，也有移動(dòng)端適配類型的設(shè)置，如果您的移動(dòng)端和電腦端是分開(kāi)的，那么選擇【有對(duì)應(yīng)PC站的移動(dòng)站】即可，如果是響應(yīng)式的，直接選擇【自適應(yīng)】即可。目前很多的搜索引擎在移動(dòng)適配這塊基本都能設(shè)置響應(yīng)的規(guī)則，因此，響應(yīng)式對(duì)SEO的影響，見(jiàn)仁見(jiàn)智，筆者覺(jué)的單從這塊講的話影響微乎其微，可以忽略不計(jì)。

作為一個(gè)前端從業(yè)者，我們知道，在做例如列表頁(yè)這類頁(yè)面時(shí)，表面上我們可以把側(cè)欄(如子欄目列表)放在頁(yè)面右側(cè)，主體內(nèi)容放在左側(cè)。但其實(shí)在html代碼中，為了優(yōu)化SEO，其實(shí)主體內(nèi)容是靠前的。這在電腦端頁(yè)面中是可以通過(guò)浮動(dòng)來(lái)輕易實(shí)現(xiàn)的。但是在移動(dòng)端時(shí)，子欄目列表等信息和主體內(nèi)容，在排版上一般都是上下排布，這種在html代碼中，則就需要保持一致。當(dāng)然，這塊算是一點(diǎn)點(diǎn)小的影響，但影響也是非常輕微的。