什麼是響應式設計？

不久前，設計師還真的不需要擔心網站在手機和平板電腦上的外觀。 手機還不能真正用於網絡瀏覽，在 iPad 出現之前，平板電腦更多的是新奇事物而不是必需品。

顯然，這一切都發生了變化，大多數技術專家預測，在未來幾年內，移動瀏覽可能遲早會取代桌面瀏覽，成為瀏覽 Web 的主要方式。

隨著屏幕尺寸和設備的不斷發展，包括視頻遊戲機和互聯網電視，舊的網頁設計方式不再適合這項任務。 隨著企業意識到需要為移動用戶優化他們的在線體驗，不適應的設計師將被拋在後面。

編者註：以下是對響應式設計的初學者介紹，不適合更有經驗的網頁設計師。

響應式設計的主要組成部分

這就是響應式網頁設計的用武之地，內容和/或佈局會自動適應查看它的屏幕大小。 最基本的，響應式設計的三個主要元素是靈活的網格、靈活的圖像和媒體查詢，後者是作為 CSS3 的一部分引入的。 稍後會詳細介紹這些內容。

靈活的網格

靈活的網格基本上是主題和模板，其中設計元素以百分比而不是像素設置。 以百分比作為度量單位，這意味著設計為 50% 的元素將始終佔據屏幕的一半，無論屏幕大小。

靈活的圖像

在最基本的情況下，通過編寫一條簡單的規則來創建靈活的圖像再簡單不過了：

 img { max-width: 100%; }

本質上，這意味著如果一個元素大於其容器，規則會強制它匹配該容器的寬度。 而且由於現代瀏覽器會按比例調整圖像大小，因此也保留了圖像縱橫比。 更重要的是，100% 規則也可用於幾乎所有其他元素，例如嵌入式視頻。

媒體查詢

自從在 CSS 2.1 中引入媒體類型以來，樣式表已經更加包容了移動設備和其他設備。 媒體類型本質上允許針對特定類別的 Web 設備進行樣式設置，這些類型包括手持設備、屏幕設備和電視設備。 但由於設備之間幾乎沒有標準化，設備製造商的支持也很少，媒體類型從未發揮其潛力。

媒體查詢不辜負這種潛力，然後是一些。 但不是像媒體類型那樣關注設備的類型，媒體查詢反而著眼於設備的功能。

一個簡單的媒體查詢可能如下所示：

查詢的兩個組成部分是媒體類型，設置為屏幕，然後是實際查詢 - (max-device-width: 480px) - 本質上是詢問設備的寬度是否為 480px 或更小。 如果是這種情況，設備會加載 generic.css。 如果不是，則鏈接將被忽略，其他鏈接也是如此，直到識別出正確的分辨率並加載了適當的樣式表。

不僅僅是分辨率

但分辨率絕不是唯一可以通過使用媒體查詢來控制的設計元素。 瀏覽器窗口的寬度和高度、橫向和縱向，甚至佈局，都是可以設置的其他一些參數。

例如，如果媒體查詢檢測到設備是智能手機，則可能會在計算機屏幕上加載顯示三列和一個文本區域和兩個垂直側邊欄的設計，可能會在智能手機屏幕上加載為全角文本區域，其中兩個側邊欄作為下方的水平元素。

靈活的心態

當然，靈活設計的一個關鍵要求是具有靈活設計思維的設計師。 不幸的是，大多數網頁在移動設備上仍然不是那麼友好，主要是因為大多數設計師仍然通常只為桌面設計，然後才考慮智能手機和平板電腦。 很少有設計師考慮到多個平台的設計。

雖然將媒體查詢合併到樣式表中有一條學習曲線，但從使用像素設計到使用百分比設計的過渡讓一些網頁設計師望而卻步。 但實際上，使用百分比進行設計並沒有太大區別，而且也更容易。

例如，考慮將 100% 和 100 像素的寬度分配給兩個相同的元素之間的差異。 一方面，您可以確保元素將填滿屏幕，無論是台式機、筆記本電腦還是 iPhone 的屏幕。 但是 100 像素寬的元素在 480 像素的 iPhone 屏幕上會很大，但在分辨率為 1600×900 的桌面屏幕上卻相對較小。

響應式設計意味著業務

對於企業來說，實施響應式設計的主要原因是顯而易見的。 潛在客戶越容易導航並找到他們正在尋找的內容，轉化率就越高。 但對於許多設計師來說，商業網站的響應式設計通常意味著縮小內容的大小以適應更小的屏幕。 任何花時間滾動並放大和縮小以查找他們正在尋找的信息的人都知道，網站的微型版本不是答案。

企業和設計師處理移動設備設計問題的另一種方式是為不同設備創建一個單獨的站點，並根據設備自動重定向。 這樣可以提供最佳界面，並避免 JavaScript 和大圖像導致的加載緩慢。

但是這種方法有幾個缺點。 當然，其中之一是創建和維護多個站點以及跨這些站點協調內容的費用。 當然，當新設備問世時，還有另一個新站點要建立。 幸運的是，如果做得正確，響應式設計幾乎可以解決移動設備設計中的所有問題。