全球近49%的網(wǎng)絡(luò)流量來自移動設(shè)備（不包括平板電腦）。如果你不設(shè)計適合移動設(shè)備的網(wǎng)站，你可能會失去大量的目標(biāo)用戶。此外，如果你希望提高你的搜索引擎優(yōu)化，你不能忽視智能手機；百度優(yōu)先使用移動優(yōu)先索引。

所有這些都需要響應(yīng)式的網(wǎng)頁設(shè)計，通過這種設(shè)計，您的網(wǎng)站的元素可以根據(jù)屏幕尺寸進行調(diào)整。在創(chuàng)建響應(yīng)式設(shè)計時，您可能會犯一些常見的錯誤。為了幫助您避免這些問題，我們在下面列出了一些可能的響應(yīng)式設(shè)計陷阱及其解決方案。

1、使用設(shè)備大小作為斷點

根據(jù)OpenSignal的數(shù)據(jù)，2015年有超過24000種不同的Android設(shè)備；這個數(shù)字在過去五年中有所增加。由于有這么多種類的設(shè)備，屏幕尺寸也有很大的不同。為了確保您的網(wǎng)站在所有設(shè)備上提供無縫的瀏覽體驗，您需要正確設(shè)置斷點。

如果您在響應(yīng)式設(shè)計中只關(guān)注設(shè)備大小的斷點，則您的網(wǎng)站可能無法在新設(shè)備上正確顯示。不要將自己限制在當(dāng)前斷點設(shè)備的維度上。相反，選擇真正的響應(yīng)式設(shè)計，可以在任何大小的屏幕上調(diào)整。

一個很好的想法是采用移動優(yōu)先的方法，即您為最小的屏幕構(gòu)建網(wǎng)站，然后慢慢地將其擴展到更大的屏幕。如果可穿戴設(shè)備對你的網(wǎng)站很重要，你應(yīng)該從這些設(shè)備開始設(shè)計。

隨著規(guī)模的擴大，您的網(wǎng)站設(shè)計可能會開始感到緊張。在這種情況下，可以向其中添加媒體查詢，以便進行必要的更改。這將幫助你的設(shè)計在每一步都保持舒適。你需要繼續(xù)這個過程，直到你達到最大的屏幕尺寸。理想情況下，這將是2800像素，因為大多數(shù)用戶的分辨率低于這個。

使用這種方法，您的斷點只在需要時才會被引入，而不是根據(jù)設(shè)備大小。這可以幫助你提供一個無縫的瀏覽體驗，你的訪客跨所有設(shè)備。你可以使用LambdaTest或BrowserStack等工具來檢查你的網(wǎng)站在新設(shè)備上的表現(xiàn)是否良好。

2、不考慮文件大小

視覺元素可以讓你的網(wǎng)站對用戶更有吸引力，然而，你必須小心當(dāng)你添加到你的網(wǎng)站。它們通常比文本文件大，會降低頁面加載速度。隨著頁面加載時間的增加，跳出率也會增加。事實上，Akamai表示，在2017年的假期期間，網(wǎng)頁加載時間增加了1.5秒，而回彈率增加了6%。

因此，有必要優(yōu)化您的圖像和視頻，以減少其大小。您可以使用TinyPNG或壓縮JPEG等工具來實現(xiàn)這一點。如果你是WordPress用戶，你可以安裝Smush插件來完成這項工作。

縮小CSS、HTML和JavaScript文件也會有所幫助。您還應(yīng)該考慮瀏覽器緩存，它可以提高返回訪問者的頁面加載速度。最后，刪除所有不必要的第三方工具和JavaScript依賴。要檢查當(dāng)前頁面加載速度并找到可能的解決方案，可以使用百度PageSpeed Insights。你也可以使用百度的移動網(wǎng)站速度工具來查看你的網(wǎng)站在移動設(shè)備上的加載速度。

3、沒有使用自適應(yīng)圖像管理

雖然圖像的文件大小很重要，但它的尺寸也很重要。你可能不用擔(dān)心在傳統(tǒng)的網(wǎng)站設(shè)計中使用不同尺寸的圖像。然而，當(dāng)涉及到響應(yīng)式設(shè)計時，錯過圖像管理可能會給您的用戶體驗帶來災(zāi)難性的后果。你最不希望你的訪客看到的是在小屏幕上顯示的巨大圖像。

為了避免這個陷阱，您應(yīng)該使用自適應(yīng)圖像管理技術(shù)。你可以采取以下方法來實現(xiàn)這一點：

基于分辨率的選擇：提供具有不同分辨率的相同圖像；

基于設(shè)備像素比率的選擇：使圖像看起來清晰，并根據(jù)屏幕大小減少可感知的人為影響；

基于視圖的選擇：根據(jù)使用的設(shè)備及其方向改變圖像；

藝術(shù)指導(dǎo)：根據(jù)顯示改變或裁剪圖像，以改善其觀看體驗。

4、隱藏的內(nèi)容

在創(chuàng)建響應(yīng)式網(wǎng)站設(shè)計時，您可能犯的最大錯誤之一是隱藏內(nèi)容。您可以這樣做，以適合您的網(wǎng)站在一個較小的屏幕或增加您的頁面加載速度。然而，你必須不惜一切代價避免它。記住，人們訪問你的網(wǎng)站不是為了尋找一個小的樣本。他們想要和在臺式機上一樣的瀏覽體驗。

你的目標(biāo)應(yīng)該是為他們提供這種全方位的體驗。這是必要的，因為他們中的許多人可能在一天內(nèi)從多個設(shè)備訪問您的網(wǎng)站。這就是為什么您必須確保在響應(yīng)式設(shè)計中保持內(nèi)容的一致性。當(dāng)然，您可以通過漸進增強在不同設(shè)備之間對內(nèi)容進行不同的優(yōu)先級排序。

5、保持一致的導(dǎo)航

在所有設(shè)備上為訪問者提供一致的瀏覽體驗是最重要的。然而，絕對的一致性也不好。在嘗試這樣做時，您可能犯的最大錯誤之一是在所有屏幕大小之間保持一致的導(dǎo)航。

當(dāng)你的屏幕變小時，一個一致的導(dǎo)航條可能會占據(jù)一半的屏幕，并可能完全破壞瀏覽體驗。您應(yīng)該考慮使用屏幕大小縮小導(dǎo)航，并可以將其更改為一個漢堡包菜單。

除了導(dǎo)航之外，按鈕大小和視覺布局也不應(yīng)該保持一致。然而，字體、鏈接和顏色處理應(yīng)該是一致的。

總結(jié)

如果你想接觸到所有的目標(biāo)受眾，你就不能避免響應(yīng)式設(shè)計。但是，在實現(xiàn)它時必須小心，避免所有可能的錯誤。讓你的訪客在所有設(shè)備上都有一致的瀏覽體驗，不向他們隱藏任何信息。優(yōu)化您的文件大小，以提高您的頁面加載速度。此外，使用自適應(yīng)圖像管理技術(shù)來根據(jù)屏幕大小減少或增加圖像尺寸。

不要讓你的導(dǎo)航保持一致，因為它可能會破壞瀏覽體驗。同樣的規(guī)則也適用于按鈕和視覺布局。最后，進行真正的響應(yīng)式設(shè)計，不要局限于基于當(dāng)前設(shè)備設(shè)計斷點。當(dāng)你在設(shè)計你的網(wǎng)站時，關(guān)鍵是要以移動為先。