響應式網站的布局有哪些優缺點？

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

一、響應式布局的優點

1、開發效率高

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

2、維護方便

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

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

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

二、響應式布局的缺點

1、代碼量冗余

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

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

2、個性化度較低

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

3、加載統一資源

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

4、用戶體驗一般

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

5、SEO可能稍有影響

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

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