性能決定一切，響應式能否解決一些問題？

據(jù)有關數(shù)據(jù)顯示，當前大約有11%的網(wǎng)站是響應式，而且這個數(shù)字還在增長。即便如此，我們也應該對響應式設計有一個基本的認識：響應式設計是很棒，但不是萬能鑰匙。自2000年開始，設計者和開發(fā)者就把移動設備的問題過于簡單化，以至于現(xiàn)在仍然有人認為響應式網(wǎng)頁設計能解決一切問題。

如果你在移動設備上一味堅持響應式設計，在轉換率后就可能隱藏著性能問題。據(jù)Guy Podjarny研究，72%的響應式網(wǎng)站不分屏幕大小都提供相同的字節(jié)，而這勢必會降低移動網(wǎng)絡連接速度，你要清楚的是：不是所有用戶都有耐心等著網(wǎng)站加載，或許還沒等用戶感受到響應式設計在不同屏幕的表現(xiàn)，用戶就會因為遲遲等不到加載結束就關掉網(wǎng)站。

只是考慮屏幕大小，很難達到移動化最佳呈現(xiàn)效果

移動化時代，響應式可以解決跨桌面和移動端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動設備。因為現(xiàn)在，桌面和移動端的界限正在變得模糊，基于不同的設備對我們而言仍然有多種可能性。比如，不同設備渲染的方式各異，在iPhone上很棒的頁面或許在其它平臺上表現(xiàn)得很糟糕。

響應是設計是一種根據(jù)設備屏幕大小和分辨率，基于桌面網(wǎng)站自適應網(wǎng)站的內(nèi)容，設計和導航的方法。它對網(wǎng)站的布局有嚴格的要求，只有流體網(wǎng)格式的頁面布局才能被抓取，實現(xiàn)響應式設計效果。所以，響應式設計是主要針對前端頁面的一種移動化解決方案。

對于網(wǎng)站的移動化來說，它是一種折中性質的設計解決方案，因為它不能通過后臺專門針對移動端設備進行靈活的改變和調(diào)整，而且由于對設計要求嚴苛，它會因為多方面因素影響而難以達到最佳呈現(xiàn)效果。如果你不信，讓我們來看看幾個典型的例子：

例一：菜單折行

如果PC端頁面頂部使用了導航欄，當頁面展現(xiàn)在小屏幕上時，響應式設計通常會把它“掰”成更緊湊的格式，但這并非總是有效，如果顯示區(qū)域比斷點更寬，又不足以在一行顯示所有菜單項的話，結果會導致菜單的折行。

例二：圖片被裁剪

在響應式設計中，內(nèi)容區(qū)域通常都隨窗口尺寸變化。所以當網(wǎng)站有使用固定寬度圖片時，當圖片超出顯示區(qū)域時，圖片就會被裁剪掉，如下圖，由于圖片太大，于是出現(xiàn)了滾動條，內(nèi)容被推到屏幕之外。

例三：元素扭曲

本質上，布局顯示在小窗口上的時候，所有未經(jīng)處理的列都會以行的形式呈現(xiàn)。這是個問題，因為內(nèi)容的扭曲會不經(jīng)意地改變設計的層級，并在一定程度上改變網(wǎng)站原有的布局結構，會出現(xiàn)用戶混淆的情況。

靈活度不夠，小改變會制造“大麻煩”

當一個響應式的網(wǎng)站導航剛好在一行內(nèi)展示，如果需要再添加一個新的導航類目、內(nèi)容章節(jié)，或者將導航標題翻譯成其他語言后導致字符長度變化，你知道會發(fā)生什么嗎？沒錯！這些情況都會破壞原有的設計方案，比如會出現(xiàn)導航全部擠在一起的情況，這簡直會要了那些“粗手指”的命，因為在小屏幕上，怎么點也點不到自己想要訪問的導航鏈，這樣就大大增加了誤操作的幾率。

更嚴重的是，這可能意味著之前的網(wǎng)站設計有可能要推倒重來，重新改版，而這僅僅是因為你想要在原有的網(wǎng)站上做一些小的改變。

在性能決定一切的當下，移動網(wǎng)絡體驗必須和閃電一樣快。迅速、實用、兼容的體驗對所有移動設備都是挑戰(zhàn)。當你使用響應式設計時，這些挑戰(zhàn)就存在。援引Ethan Marcotte的話：“最重要的是，響應式網(wǎng)頁設計的初衷不是要取代移動網(wǎng)頁。”響應式設計從來不是意味著要解決“性能”，然而，相信它能解決你所有問題，這大錯特錯。如果我們能使用一些其他的技術，就可以實現(xiàn)獲得響應式設計好處的同時，同時又不影響移動設備的性能，這是比較理想的。

本文章來源：尚品中國