從一開始 全球資訊網的設計旨在達成這個目標， 無論你使用哪種硬體都沒關係。 裝置搭載的作業系統無關緊要。 只要您可以連上網路，您就可以存取全球資訊網。
網路發展初期，大多數人都是使用電腦。 如今，網路無所不在，適用於電腦、筆電、平板電腦、折疊式手機、冰箱和汽車。 使用者一般期望網站無論使用何種裝置，都能完美呈現。 回應式設計就是如此。
回應式設計不是設計網站的第一種做法。 在採用回應式設計前的幾年，網頁設計人員和開發人員不斷嘗試過許多不同的技術。
固定寬度設計
網路在 1990 年代初開始流行 大多數螢幕的螢幕尺寸都是 640 像素寬 x 480 像素。 這些是凸天的陽極光管 不同於我們現有的液態水晶顯示器。
在網頁設計的早期設計階段 設計寬度為 640 像素的網頁，實在是相當安全的。 儘管手機和相機等其他技術的飽和度降低 螢幕變得越來越大 (最終，成效也更理想)。 在此之前，大多數螢幕的尺寸都是 800 x 600 像素。 網頁設計也會隨之改變。設計人員和開發人員開始假設 800 像素是安全的預設尺寸。
螢幕又變大了。1024x768 已成為預設選項。 它就像是網頁設計人員與硬體製造商之間的軍隊競賽。
無論是 640、800 或 1024 像素 固定寬度設計稱為「固定寬度」，然後選擇要設計的特定寬度
如果您為版面配置指定固定寬度， 那麼您的版面配置只會在特定寬度的情況下正常顯示。 如果網站訪客的螢幕寬度超過您選定的寬度，畫面就會浪費資源。 您可以將網頁內容置中，平均分配空間 (而非一側留白)，但您依然無法充分利用可用的空間。
同樣地，如果訪客到達網站的畫面比你選定的寬度還窄， 就無法水平調整內容 瀏覽器會產生檢索列 (與捲軸相等的水平內容)，而使用者必須將整個網頁左右移動才能看到所有內容。
液體版面配置
儘管多數設計人員都使用固定寬度的版面配置，但有些設計人員選擇採用彈性版面配置。 您可以採用百分比來調整版面配置寬度，讓版面配置不使用固定寬度。 這些設計在多種情況下都能運作，而非寬度固定的版面配置 (僅能根據單一特定大小顯示)。
這類版面配置稱為液體版面配置。 不過，雖然在各種寬度下，液體版面配置看起來會很美，但在極端的情況下會開始惡化。 在寬螢幕上顯示，版面配置會延展。 在狹窄的螢幕上，版面配置看起來會是壓縮狀態。上述兩種情況都不適用。
您可以在版面配置中使用 min-width 和 max-width，即可緩解這類問題。
但任何大小低於最小寬度或高於最大寬度，就和使用固定寬度版面配置的情況一樣。
寬螢幕，未使用的空間將有浪費空間，
在較小的螢幕上，使用者必須左右移動整個頁面才能看到所有內容。
liquid 字詞只是用來描述這種版面配置的其中一個字詞。 這類設計也稱為流暢版面配置或彈性版面配置。 術語跟技術一樣流暢。
小螢幕
21 世紀，網路世界的規模持續不斷成長。 但監控器確實如此但使用者開啟的新螢幕比電腦裝置小。 隨著手機出現完整的網路瀏覽器，設計師遇到了兩難。 請問他們如何確保自己的設計在電腦和手機上都能呈現最佳效果？ 他們需要依照寬度為 240 像素，及數千個像素寬的螢幕，設定內容的樣式。
個別網站
其中一種做法是為行動訪客另外建立子網域， 但您必須維護兩個不同的程式碼集和設計。 此外，為將訪客重新導向到行動裝置 使用者代理程式擷取功能 這可能並不可靠且容易遭人假冒。 基於隱私權考量，Chrome 即將淘汰使用者代理程式字串。 此外，行動和行動廣告之間也沒有明確的界線你會將平板電腦裝置傳送到哪個網站？
自動調整式版面配置
與其在不同子網域上建立不同網站 您的網站可能會有二或三個固定寬度的版面配置。
媒體查詢初次抵達 CSS 時，為您開創了版面配置更彈性的大門。 但許多開發人員仍然最願意製作固定寬度的版面配置。 有一個技術涉及在特定寬度下切換幾種固定寬度的版面配置。 有些人稱之為「自動調整式設計」。
設計人員可透過自動調整式設計，以幾種不同大小提供美觀的版面配置 但在不同大小的空檔時，設計卻無法讓人滿意 雖然在固定寬度的版面配置中，多餘空間的問題並不會因此而持續發生。
您可以透過 CSS 媒體查詢，向使用者顯示最接近瀏覽器寬度的版面配置。 但由於裝置大小各有不同，版面配置看起來不太適合大多數人使用。
回應式網頁設計
如果自動調整式版面配置是媒體查詢和固定寬度版面配置的組合，回應式網頁設計是結合媒體查詢和液體版面配置的組合。
字詞由 Ethan Marcotte 創作， 一篇有關清單中的文章，2010 年。
他針對回應式設計定義了三項標準：
- 浮動格線
- 流動媒體
- 媒體查詢
回應式網站的版面配置和圖片在任何裝置上都能呈現最佳效果。但還有一個問題。
viewport 的 meta 元素
手機上的瀏覽器必須能處理專為螢幕較寬的固定寬度版面配置設計的網站。 根據預設，行動瀏覽器會假設 980 像素是使用者設計的寬度 (但這並非錯)。 所以即使你使用液體版面配置 瀏覽器就會套用 980 像素的寬度，然後將顯示的網頁縮放至畫面的實際寬度。
如果您採用回應式設計，則必須要求瀏覽器不要縮放。
如要這麼做，請使用網頁 head 中的 meta 元素：
<meta name="viewport" content="width=device-width, initial-scale=1">
有兩個值並以半形逗號分隔，
第 1 個是「width=device-width」。
這會指示瀏覽器假設網站寬度與裝置寬度相同
(而不是假設網站的寬度為 980 像素)。
第二個值為 initial-scale=1。
這會告知瀏覽器該進行縮放的量或下限。
有了回應式設計，您就不需要瀏覽器進行任何縮放操作。
設定好 meta 元素後，您的網頁就可以開始回應式。
現代回應式設計
如今，我們能夠在不僅限於可視區域大小的情況下，建立回應式網站。
媒體功能可讓開發人員存取使用者偏好設定，並享有個人化體驗。
容器查詢可讓元件擁有自己的回應式資訊。
設計人員可以使用 picture 元素，根據螢幕比例做出藝術方向決策。
隨堂測驗
測試您對回應式網頁設計的瞭解程度
在 2021 年，以固定寬度設計網頁是相當安全的做法嗎？
在哪種螢幕大小下，液體版面配置通常較為困難？
回應式設計原本的三項標準為何？
回應式設計是一個充滿無限可能的有趣世界。 在本課程的其他段落中，您將瞭解這些技術，以及如何運用這些技術創造美觀。 造福大眾的回應式網站