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

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

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

1、開發(fā)效率高

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

2、維護方便

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

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

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

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

1、代碼量冗余

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

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

2、個性化度較低

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

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

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

4、用戶體驗一般

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

5、SEO可能稍有影響

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

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