簡介

就一開始，全球資訊網的設計是無庸置疑的。使用什麼硬體都可以。 無論裝置搭載哪個作業系統。只要您可以連上網際網路，即可使用全球資訊網。

在網路發展初期，大多數人使用桌上型電腦。現今的使用者可以透過電腦、筆電、平板電腦、折疊式手機、冰箱和汽車使用網路。 使用者一定都希望無論使用何種裝置，網站都能完美呈現。 只要使用回應式設計，

設計網站時，回應式設計並不是第一個做法。早在回應式設計之前，網頁設計人員和開發人員嘗試了多種不同技術。

固定寬度設計

1990 年代初期，當網路崛起時，大多數螢幕的螢幕尺寸是 640 像素，高度為 480 像素。 這些是活潑的陰間光線管，不像現在的平坦液體水晶顯示器。

在早期的網頁設計時代，可以放心設計寬度為 640 像素的網頁。雖然手機和相機等其他技術已經最小化，但螢幕越來越大，最後變得更加模糊。不久之前，大多數螢幕的尺寸都是 800 x 600 像素。網頁設計也隨之改變。設計人員和開發人員一開始先假設 800 像素是安全的預設像素。

畫面又變大了。其預設值為 1024 x 768。感覺就像是網頁設計人員和硬體製造商之間的爭執。

​​

無論是 640、800 或 1024 像素，選擇要設計的特定寬度就稱為固定寬度設計。

如果您為版面配置指定固定寬度，版面配置就只會以該寬度顯示。如果網站訪客的螢幕寬度超過您選擇的寬度，就會出現在畫面上佔用的空間。 您可以將網頁的內容置中，以便平均分配該空間 (而不是其中一側空白)，但也無法充分利用可用的空間。

同樣地，如果訪客到達畫面的寬度比您選的寬度還小，系統就無法水平顯示內容。瀏覽器會產生檢索列，也就是捲軸的水平版本，使用者必須左右移動整個網頁才能看到所有內容。

液體版面配置

雖然大多數設計人員都使用固定寬度的版面配置，但有些設計者選擇讓版面配置更靈活。與其使用固定寬度，您可以讓欄寬更靈活地配置欄寬。 這些設計與固定寬度版面配置相比，通常只會在某種特定大小的樣子上運作。

稱為液體版面配置。但雖然液體配置在各種寬度下看起來很不錯，但在極端寬度的情況下會越來越惡。在寬螢幕上，版面配置看起來會延展。在狹窄的螢幕上，版面配置看起來會經過壓縮。這兩種情況都不理想。

您可以為版面配置使用 min-width 和 max-width，減緩這些問題。但任何大小低於最小寬度或超過最大寬度時，固定寬度版面配置都會遇到相同問題。寬螢幕上會浪費未使用的空間。在較小的螢幕上，使用者必須左右移動整個頁面，才能看到所有內容。

「液態」 僅是用來描述這類版面配置的字詞之一。這類設計又稱為自動調整版面配置或彈性版面配置。而術語就像是各種技巧。

小螢幕

21 世紀，網路規模持續擴大。 當然，監視器！但新的螢幕比任何電腦裝置更小。 隨著手機推出配備全功能網路瀏覽器，設計師面臨兩難的困境。他該如何確保設計在電腦和手機上呈現良好？ 他們需要能以寬度為 240 像素、寬度為數千個像素，為螢幕內容設定樣式。

個別網站

其中一種做法是為行動訪客另外設定子網域。 不過，您必須維護兩個獨立的程式碼集和設計。此外，為了將行動裝置的訪客重新導向，您必須進行使用者代理程式探查，這項機制不可靠且容易遭到假冒。基於隱私權考量，Chrome 將淘汰使用者代理程式字串。 而且行動裝置與非行動裝置之間並沒有明確的界線。你會將平板電腦裝置帶往哪個網站？

自動調整式版面配置

你可以使用單一網站搭配二或三個固定寬度的版面配置，不必分別在不同的子網域上建立網站。

媒體查詢首次進入 CSS 後，便開啟了更多彈性版面配置。但許多開發人員仍然習慣製作固定寬度的版面配置。 其中一項技巧是在指定寬度下，切換幾種固定寬度的版面配置。 有些人稱其為「自動調整式設計」。

自動調整式設計讓設計人員能夠提供以幾種不同尺寸顯示外觀的版面配置，但就算在不同的尺寸之間顯示，設計也不會很美觀。儘管在固定寬度的版面配置中卻沒有那麼差，但多餘空間的問題仍會持續發生。

使用 CSS 媒體查詢，您就能為使用者提供最接近瀏覽器寬度的版面配置。 但由於裝置大小不一，看到絕大多數人可能無法看到最理想的版面配置。

回應式網頁設計

如果自動調整式版面配置是媒體查詢和固定寬度版面配置的混搭，回應式網頁設計就是媒體查詢和液態版面配置的組合。

這個字詞由 Ethan Marcotte 寫在 2010 年的 A List Apart 文章中。

Ethan 為回應式設計的定義了三項標準：

1. 浮動格線
2. 自動調整媒體
3. 媒體查詢

回應式網站的版面配置和圖片，在各種裝置上都能呈現良好效果。但有一個問題。

viewport 的 meta 元素

手機瀏覽器必須和針對較寬螢幕的固定寬度版面配置設計而成。 根據預設，行動瀏覽器會假設使用者設計的寬度是 980 像素，而且沒有錯誤。 因此，即使您使用了液態版面配置，瀏覽器仍會套用 980 像素的寬度，然後將實際呈現的網頁縮小至畫面的實際寬度。

如果您使用的是回應式設計，就必須告知瀏覽器不要進行縮放。 方法是在網頁的 head 中使用 meta 元素：

<meta name="viewport" content="width=device-width, initial-scale=1">

有兩個值 (以半形逗號分隔)，第一個是 width=device-width。這樣會指示瀏覽器假設網站的寬度與裝置的寬度相同 (而非假設網站的寬度為 980 像素)。 第二個值為 initial-scale=1。 這可讓瀏覽器知道要執行的縮放比例。 採用回應式設計，您不希望瀏覽器完全縮放大小。

完成這項 meta 元素後，網頁就能立即採用回應式設計。

現代回應式設計

如今，我們能夠製作回應式網站，跳脫可視區域大小的限制。 媒體功能可讓使用者存取使用者偏好設定，並提供自訂體驗。容器查詢可讓元件擁有自己的回應式資訊。picture 元素可讓設計人員根據螢幕比例做出藝術方向決策。

隨堂測驗

測驗您對回應式網頁設計的瞭解程度

回應式設計是充滿可能性且不斷成長的世界。 本課程接下來將介紹這些技術，並說明如何運用這些技術，為所有人建立精美的回應式網站。