隨著設(shè)備數(shù)量和屏幕尺寸的增加，響應式設(shè)計已成為標準協(xié)議。  PC和移動Web設(shè)計的兼容性測試對于確保用戶無論其訪問方式如何都能導航并輕松訪問內(nèi)容至關(guān)重要。

  就像網(wǎng)頁設(shè)計領(lǐng)域的幾乎所有事物一樣，關(guān)于如何針對較小的屏幕進行設(shè)計也有不同的想法。 但是，除了這些差異之外，我們還應牢記一些響應式設(shè)計原則。

1.可讀性和可用性至上

  每個人都希望他們的設(shè)計在每個屏幕上看起來都漂亮。 但是，在移動領(lǐng)域嘗試太花哨是危險的。 在臺式機上看起來漂亮的高端布局或功能可能對電話沒有意義。 在適當?shù)牡胤剑枰喕?如果事實證明某個特定元素在小屏幕上太笨拙，您將不會后悔刪除它或?qū)⑵涮鎿Q為更有效的工作。 就排版而言，移動網(wǎng)頁設(shè)計的大小和對比度同樣重要（如果不是更多的話）。 在閱讀長篇文章時，即使使用高質(zhì)量的手機屏幕，凝視仍然有些無聊。 確保文本大小正確，并設(shè)置行距和邊距以幫助提高可讀性。 結(jié)論是，桌面用戶在可用性方面所做的相同努力也應集中在使移動體驗成為出色的體驗上。

  2.使用可用的屏幕空間

  多列布局無處不在，但是文本密集型列通常不適用于最小的屏幕。 在這種情況下，將多列簡單地轉(zhuǎn)換為單列是有意義的。 但是，當我們談論平板電腦甚至手機水平放置時，該欄仍然非常有效。 關(guān)鍵是值得花些功夫看看我們?nèi)绾尾拍茏詈玫乩矛F(xiàn)有的屏幕資源。 很多次，我們一直跳過這些中間分辨率，而只關(guān)注最小和最大的視口解決方案。 例如，在同一視圖中，以縱向放置的平板電腦應不同于以手機放置的手機。 實施此類策略的一種更簡單的方法是使用CSS Flexbox。 正確配置后，通常可以自動為當前視口提供最佳布局。 您可能需要通過媒體查詢進行一些小的調(diào)整，但是值得進行一些其他調(diào)整。

  3.一切不必完全相同

  容易陷入將單個設(shè)計元素放置在與移動和桌面視口相同的相對位置的陷阱中。 盡管對一致性的要求值得稱贊，但這種方法有時在較小的屏幕上適得其反。 例如，許多網(wǎng)站在其標題中放置了諸如搜索表單或社交媒體圖標之類的項目。 在較大的屏幕上，它運作良好，但通常會阻礙手機的主要內(nèi)容。 在輔助頁面上尤其如此，用戶可能實際上只是想閱讀頁面上的文本而不必擔心所有額外的垃圾。 除了將這些類型的項目粘貼到網(wǎng)站標題上之外，還有許多選項。 您可能考慮將這些項目塞入一個按鈕，該按鈕根據(jù)用戶要求顯示它們。 或者它們可以成為您實現(xiàn)的任何移動導航解決方案的一部分。 同樣的事情可能適用于側(cè)邊欄之類的功能。 其他元素可能被完全隱藏。 同樣，媒體查詢（可能還有一些條件代碼）也可以將這些項目放在移動設(shè)備上更合適的位置。 最好決定要去哪里。

4.添加移動設(shè)備特定的功能

  在考慮響應式設(shè)計策略時，您可以考慮添加一些技巧，以為移動用戶帶來更高級別的便利。 這些項目通常不需要額外的努力即可實施。 但是它們可以大大提高可用性。 在支持觸摸功能的設(shè)備上瀏覽可能會帶來臺式機用戶不必面對的挑戰(zhàn)。 對于一個人來說，必須從更長的頁面向上滾動以返回主導航是移動設(shè)備上的主要挑戰(zhàn)。 您可以通過使用導航功能（在檢測到用戶向上滾動時自動顯示）來在某種程度上緩解這種情況。 另一種選擇是在每個頁面的底部都有一個很好的舊“返回首頁”鏈接。 對于鼓勵電話的企業(yè)，單擊“呼叫”按鈕可能是受歡迎的功能。 這可以采用傳統(tǒng)按鈕的形式，該按鈕的字面意思是“立即致電我們”，或提及整個站點超鏈接的電話號碼。 本質(zhì)上，您可以考慮幫助移動用戶與組織進行交互的所有措施。

  5.移動問題

  自適應設(shè)計是一個強大的工具。 我們可以使用它在幾乎所有設(shè)備上為用戶提供最佳體驗。 但是作為設(shè)計師，我們必須充分利用這些可能性。 首先，最重要的是確保移動用戶可以輕松瀏覽和導航您的站點。 從那里，做出有關(guān)外觀和工作方法的最明智的設(shè)計決策。 如果您使用戶滿意，他們將更有可能再次回來。