認(rèn)為響應(yīng)式能解決所有問(wèn)題，那就大錯(cuò)特錯(cuò)了

據(jù)相關(guān)數(shù)據(jù)顯示，目前約有11%的網(wǎng)站是響應(yīng)式的，而且這個(gè)數(shù)字還在不斷增長(zhǎng)。盡管如此，我們還是應(yīng)該對(duì)響應(yīng)式設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)：響應(yīng)式設(shè)計(jì)很棒，但不是萬(wàn)能的。自2000 年以來(lái)，設(shè)計(jì)人員和開(kāi)發(fā)人員將移動(dòng)設(shè)備的問(wèn)題過(guò)于簡(jiǎn)單化，以至于有些人仍然認(rèn)為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)可以解決所有問(wèn)題。

如果您堅(jiān)持在移動(dòng)設(shè)備上采用響應(yīng)式設(shè)計(jì)，性能問(wèn)題可能隱藏在轉(zhuǎn)化率背后。根據(jù)Guy Podjarny 的研究，無(wú)論屏幕大小如何，72% 的響應(yīng)式網(wǎng)站都提供相同的字節(jié)，這將不可避免地降低移動(dòng)網(wǎng)絡(luò)連接速度。你需要清楚：并不是所有的用戶都有耐心等待網(wǎng)站加載，也許用戶還沒(méi)來(lái)得及感受到響應(yīng)式設(shè)計(jì)在不同屏幕上的表現(xiàn)，用戶就會(huì)因?yàn)榈炔患凹虞d完成而關(guān)閉網(wǎng)站.

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

在移動(dòng)時(shí)代，響應(yīng)式可以解決跨桌面和移動(dòng)窗口尺寸范圍的問(wèn)題。但僅考慮屏幕尺寸是低估了移動(dòng)設(shè)備。因?yàn)楝F(xiàn)在，桌面端和移動(dòng)端之間的界限正在模糊，基于不同設(shè)備的我們?nèi)匀挥卸喾N可能性。例如，不同的設(shè)備呈現(xiàn)方式不同，在iPhone 上看起來(lái)很棒的頁(yè)面在另一個(gè)平臺(tái)上可能看起來(lái)很糟糕。

響應(yīng)式設(shè)計(jì)是一種在桌面網(wǎng)站的基礎(chǔ)上根據(jù)設(shè)備屏幕尺寸和分辨率適配網(wǎng)站內(nèi)容、設(shè)計(jì)和導(dǎo)航的方法。它對(duì)網(wǎng)站的布局有嚴(yán)格的要求，只有采用流體網(wǎng)格格式的頁(yè)面布局才能實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)效果。因此，響應(yīng)式設(shè)計(jì)是一種主要針對(duì)前端頁(yè)面的移動(dòng)解決方案。

對(duì)于網(wǎng)站的移動(dòng)端來(lái)說(shuō)，是一個(gè)折衷的設(shè)計(jì)方案，因?yàn)椴荒芡ㄟ^(guò)后臺(tái)針對(duì)移動(dòng)設(shè)備進(jìn)行靈活的更改和調(diào)整，而且由于設(shè)計(jì)要求嚴(yán)格，會(huì)受到很多方面的影響。由于各種因素的影響，很難達(dá)到最佳的呈現(xiàn)效果。不信，我們來(lái)看幾個(gè)典型的例子：

例一：菜單折行

如果在PC端頁(yè)面頂部使用導(dǎo)航欄，當(dāng)頁(yè)面在小屏幕上顯示時(shí)，響應(yīng)式設(shè)計(jì)通常會(huì)將其“打散”成更緊湊的格式，但這并不總是有效，如果顯示區(qū)域比斷點(diǎn)寬，一行顯示所有菜單項(xiàng)不夠，結(jié)果會(huì)導(dǎo)致菜單換行。

例二：圖片被裁剪

在響應(yīng)式設(shè)計(jì)中，內(nèi)容區(qū)域通常會(huì)隨著窗口的大小而變化。所以當(dāng)網(wǎng)站使用定寬圖片時(shí)，當(dāng)圖片超出顯示區(qū)域時(shí)，圖片會(huì)被裁剪，如下圖，因?yàn)閳D片太大，出現(xiàn)滾動(dòng)條，內(nèi)容被擠出屏幕。

例三：元素扭曲

本質(zhì)上，當(dāng)布局顯示在小部件上時(shí)，所有未處理的列都呈現(xiàn)為行。這是一個(gè)問(wèn)題，因?yàn)閮?nèi)容扭曲會(huì)在不經(jīng)意間改變?cè)O(shè)計(jì)的層次結(jié)構(gòu)，并在一定程度上改變網(wǎng)站原有的布局結(jié)構(gòu)，從而導(dǎo)致用戶混淆。

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

當(dāng)一個(gè)響應(yīng)式網(wǎng)站導(dǎo)航僅僅顯示在一行中時(shí)，如果你需要在導(dǎo)航標(biāo)題翻譯成其他語(yǔ)言后添加新的導(dǎo)航類別、內(nèi)容章節(jié)或更改字符長(zhǎng)度，你知道會(huì)發(fā)生什么嗎？這是正確的！這些情況都會(huì)破壞原來(lái)的設(shè)計(jì)方案。比如會(huì)出現(xiàn)所有導(dǎo)航都擠在一起的情況，會(huì)把那些“粗手指”干掉，因?yàn)樵谛∑聊簧希銦o(wú)法點(diǎn)擊你想訪問(wèn)的內(nèi)容。導(dǎo)航鏈，大大增加了誤操作的幾率。

更嚴(yán)重的是，這可能意味著以前的網(wǎng)站設(shè)計(jì)可能要完全重新設(shè)計(jì)和重新設(shè)計(jì)，只是因?yàn)槟阆朐谠瓉?lái)的網(wǎng)站上做一些小的改動(dòng)。

在性能至上的世界中，移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須快如閃電?？焖?、有用且兼容的體驗(yàn)是所有移動(dòng)設(shè)備面臨的挑戰(zhàn)。當(dāng)您使用響應(yīng)式設(shè)計(jì)時(shí)，這些挑戰(zhàn)就存在了。引用Ethan Marcotte 的話：“最重要的是，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)并不是為了取代移動(dòng)網(wǎng)絡(luò)?！表憫?yīng)式設(shè)計(jì)從來(lái)都不是為了解決“性能”，但是，相信它會(huì)解決你所有的問(wèn)題是一個(gè)大錯(cuò)誤，非常錯(cuò)誤。如果我們可以使用一些其他技術(shù)來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的好處而不損害移動(dòng)設(shè)備的性能，那將是理想的。

本文來(lái)源：推來(lái)客

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！