網頁設計:響應式VS.自適應,哪種設計更好呢?

發表於2016-01-30

blog-rwd-v-awd-1

移動裝置的發展讓我們不能再忽略它們,人民用它們訪問網站,而不是臺式電腦。如果你的網站還不能再移動端瀏覽,那麼你的商機將大大減少,並且訪問量也不會增加。

有什麼不一樣呢?

響應式是流佈局,它會自動適應螢幕大小,不管是什麼裝置。響應式使用CSS完成裝置判斷。這種基於網格的流佈局會自動調整網頁的高度和寬度來使用不同尺寸的螢幕,並讓其現實正確。

r_vs_a-1

 

自適應則採取多個不同的佈局設計,多個螢幕的尺寸,使用哪個佈局取決於螢幕型別。自適應作品用螢幕尺寸來決定用哪套佈局。

vs_banner

如何比較響應式和自適應?
responsive-or-adaptive

響應式網頁會是一個更難的選擇,因為它需要用CSS和結構來確保網頁能再任何大小上現實,讓一套佈局能在任何螢幕上使用是一件令人生畏的事情。

自適應的設計不太靈活,它只能在其預先設計好的螢幕上正常顯示,如果市面上出現了一個新的尺寸,你可能就要修改你的設計了,活著乾脆重設計一個,響應式網站在這方面更靈活些,自適應的網站會經常需要一些例行公事的維護。

r_vs_a-2

 

我們的設計到底是使用響應式還是自適應呢?

在大多數情況下,響應式網站是個安全的選擇。無論螢幕大小,它都能有很好的現實效能,而且早起設計的時候也會解約很多時間。

但是,最終還是要看內容,如果內容太多,頁面資訊複雜,建議使用自適應的模式,因為這樣設計移動端要考慮的會簡單一些,而且更容易做適配。如果內容少,當然首選響應式。市面上也有一些典型的例子,比如“淘寶”,因為首頁內容太多,所以只能選擇自適應的模式,PC端和移動端的內容差別很大。再如“36kr”他們就是典型的響應式,因為資訊架構簡單。

 

相關文章