隨著網路上使用手機的人數增加，網頁設計師越來越需要以適合各種螢幕大小的方式排版內容。回應式網頁設計最初是由 Ethan Marcotte 在 A List Apart 中定義，是一種設計策略，可因應使用者需求和裝置功能，變更網站版面配置，以配合所用裝置。舉例來說，回應式網站可能會在手機上以單欄顯示內容，在平板電腦上以兩欄顯示，在桌上型電腦上則以三或四欄顯示。
由於支援網路的裝置螢幕大小不一，因此網站必須能適應現有或未來的任何螢幕大小。現代的彈性設計也會考量互動模式，例如觸控螢幕。目標是為所有人提供最佳體驗。
設定可視區域
如要讓網頁在各種裝置上都能呈現最佳效果，請務必在文件的標題中加入可視區域中繼標記。這個標記會告訴瀏覽器如何控管網頁大小和縮放比例。
為了盡可能提供最佳體驗，行動瀏覽器會以電腦螢幕的寬度轉譯網頁 (通常約為 980px，實際情況可能因裝置而異)，然後嘗試放大字型，並將內容縮放至符合螢幕的大小，讓內容更容易閱讀。這可能會導致字型不一致，且使用者必須放大才能查看及使用內容。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
使用可視區域中繼標記值 width=device-width，可讓網頁以裝置獨立像素 (DIP) 配合螢幕寬度。DIP 是標準的視覺像素單位 (在高密度螢幕上，DIP 可能由許多實體像素組成)。這樣網頁就能重新編排內容，配合不同螢幕大小。
部分瀏覽器在旋轉至橫向模式時，會保持頁面寬度不變，並縮放畫面以填滿螢幕，而不是重新排版。加入 initial-scale=1 值可讓瀏覽器在 CSS 像素和與裝置無關的像素之間設定 1:1 的關係，無論裝置螢幕方向為何，網頁都能充分利用橫向寬度。
沒有 width 或 initial-scale 的 <meta name="viewport"> 標記
Lighthouse 稽核可協助您自動化確保 HTML 文件正確使用 viewport 中繼標記的程序。
根據可視區域調整內容大小
無論是電腦或行動裝置，使用者都習慣垂直捲動網站，而非水平捲動。如果使用者必須左右捲動或縮小畫面才能查看整個網頁，使用者體驗就會不佳。
使用中繼可視區域標記開發行動版網站時，很可能會不小心建立超出指定可視區域的網頁內容。舉例來說，如果圖片顯示的寬度大於檢視區塊，可能會導致水平捲動。如要避免這種情況，請調整內容，使其符合可視區域大小。
未針對可視區域正確調整內容大小 Lighthouse 稽核可協助您自動偵測溢出的內容。
圖片
如果圖片尺寸大於可視區域，固定尺寸的圖片會導致網頁捲動。建議為所有圖片提供 max-width 的 100%，這樣圖片就會縮小以配合可用空間，同時避免圖片超出原始大小。
在大多數情況下，只要在樣式表新增下列項目即可：
img {
max-width: 100%;
display: block;
}
將圖片尺寸新增至 img 元素
即使您已設定 max-width: 100%，我們仍建議在 <img> 代碼中加入 width 和 height 屬性，讓瀏覽器在圖片載入前預留空間。這有助於避免版面配置位移。
版面配置
由於裝置間的螢幕尺寸和 CSS 像素寬度差異很大 (例如手機和平板電腦之間，甚至是不同手機之間)，因此內容不應依賴特定可視區域寬度來呈現良好效果。
過去，這需要以百分比設定版面配置元素。使用像素測量值時，使用者必須在小螢幕上水平捲動：
如果改用百分比，較小螢幕上的欄會變窄，因為每個欄一律會佔用相同百分比的螢幕寬度：
使用彈性方格、格線版面配置和多欄等現代 CSS 版面配置技術，就能輕鬆建立這些彈性格線。
Flexbox
如果有一組大小不同的項目，且希望這些項目能舒適地排列在一列或多列中，而較小的項目佔用較少空間，較大的項目佔用較多空間，就很適合使用 Flexbox。
.items {
display: flex;
justify-content: space-between;
}
您可以使用 Flexbox 將項目顯示為單列，或在可用空間減少時換行顯示。
CSS 格狀版面配置
CSS 格線版面配置會建立彈性格線。您可以使用格線版面配置和 fr 單位 (代表容器中可用空間的一部分)，改善先前浮動的範例。
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
您也可以使用格線建立一般格線版面配置，並容納盡可能多的項目。螢幕越小，可用的音軌數量就越少。以下示範顯示的格線包含的資訊卡數量，會盡量填滿每一列，且最小尺寸為 200px。
多欄版面配置
對於某些類型的版面配置，您可以使用「多欄版面配置」(Multicol)，透過 column-width 屬性建立回應式欄數。在下列示範中，頁面會在有空間容納另一個 200px 欄時新增欄。
使用 CSS 媒體查詢來確保回應式設計
有時您可能需要對版面配置進行更廣泛的變更，才能支援特定螢幕大小，而先前所述的技術無法滿足這類需求。這時媒體查詢就能派上用場。
媒體查詢是簡單的篩選器，可套用至 CSS 樣式，根據顯示內容的裝置類型變更這些樣式。此外，樣式也可以根據裝置功能 (包括寬度、高度、螢幕方向) 變更，以及裝置是否做為觸控螢幕使用。
如要提供不同的列印樣式，可以指定輸出類型，並加入列印樣式的樣式表：
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
您也可以使用媒體查詢，在主要樣式表單中加入列印樣式：
@media print {
/* print styles go here */
}
如果是回應式網頁設計，最常見的查詢是裝置功能，因此您可以自訂觸控螢幕或較小螢幕的版面配置。
根據可視區域大小的媒體查詢
媒體查詢可讓您建立回應式體驗，針對特定螢幕大小套用特定樣式。螢幕大小查詢可測試下列項目：
width(min-width，max-width)height(min-height，max-height)orientationaspect-ratio
根據裝置功能查詢媒體
由於裝置種類繁多，開發人員無法假設所有大型裝置都是一般桌上型電腦或筆記型電腦，也無法假設所有小型裝置都使用觸控螢幕。媒體查詢規格最近新增了一些項目，可供您測試各項功能，例如用來與裝置互動的指標類型，以及使用者是否能將指標懸停在元素上。
hoverpointerany-hoverany-pointer
請在不同裝置上觀看這個試用版，例如一般桌上型電腦和手機/平板電腦。
所有新式瀏覽器都支援這些新功能。如要瞭解詳情，請參閱 MDN 頁面中的懸停、any-hover、指標和any-pointer。
使用 any-hover 和 any-pointer
any-hover 和 any-pointer 功能會測試使用者是否能將指標懸停在元素上 (通常稱為「懸停」)，或使用指標，即使指標不是與裝置互動的主要方式也一樣。使用這些屬性時請務必小心，例如避免強迫觸控螢幕使用者改用滑鼠。不過，如果需要判斷使用者擁有的裝置類型，any-hover 和 any-pointer 就很有用。舉例來說，配備觸控螢幕和觸控板的筆電應同時符合粗略和精細指標，並具備懸停功能。
如何選擇中斷點
請勿根據裝置類別或任何產品、品牌名稱或作業系統定義中斷點。這會導致程式碼難以維護。而是讓內容決定如何變更版面配置，以配合容器。
從小處著手，逐步擴大，挑選主要中斷點
請先設計適合小螢幕的內容，然後擴大螢幕，直到需要使用中斷點為止。這樣一來，您就能盡量減少網頁上的斷點數量，並根據內容進行最佳化。
以下範例將逐步說明本頁開頭的天氣預報小工具範例。首先，請確保預報在小螢幕上顯示正常：
接著調整瀏覽器大小，直到元素之間有太多空白字元，導致小工具看起來不美觀為止。這項決定較為主觀，但超過 600px
肯定太寬。
如要在 600px 插入中斷點，請在元件的 CSS 結尾建立兩個媒體查詢：一個用於瀏覽器寬度為 600px 或更窄時，另一個則用於瀏覽器寬度大於 600px 時。
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
最後，重構 CSS。在 max-width 的媒體查詢中，加入僅適用於小螢幕的 CSS。600px在 601px 的媒體查詢中，為較大螢幕新增 CSS。min-width
視需要挑選次要中斷點
除了在版面配置大幅變更時選擇主要中斷點，針對微小變更進行調整也很有幫助。舉例來說，在主要中斷點之間，調整元素邊框間距或邊框內間距，或是增加字型大小，有助於讓版面配置看起來更自然。
這個範例與上一個範例遵循相同的模式，首先是最佳化較小螢幕的版面配置。首先，當可視區寬度大於 360px 時，請提升字型。之後，如果空間足夠，你可以將高溫和低溫分開顯示在同一行，並放大天氣圖示。
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
如果是大螢幕，建議限制預報面板的最大寬度，以免佔用整個螢幕寬度。
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
調整文字，方便閱讀
根據經典可讀性理論，理想的欄位每行應包含 70 到 80 個字元 (約 8 到 10 個英文字)。如果文字區塊的寬度超過 10 個字，建議您新增中斷點。
在這個範例中，1em 的 Roboto 字型在較小的螢幕上每行會產生 10 個字，但較大的螢幕需要中斷點。在這種情況下，如果瀏覽器寬度大於 575px，理想的內容寬度就是 550px。
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
避免隱藏內容 (:#avoid-hiding-content)
請根據螢幕大小謹慎選擇要隱藏或顯示的內容。 請勿因為無法在畫面上顯示所有內容而隱藏內容。螢幕大小無法預測使用者想看的內容。舉例來說，如果天氣預報中沒有花粉指數，對春季過敏者來說可能就是大問題，因為他們需要這項資訊來判斷是否能外出。
在 Chrome 開發人員工具中查看媒體查詢中斷點
設定媒體查詢中斷點後，請檢查這些中斷點對網站外觀的影響。你可以調整瀏覽器視窗大小來觸發中斷點，但 Chrome 開發人員工具內建的功能可顯示網頁在不同中斷點下的外觀。
如要查看不同中斷點下的網頁，請按照下列步驟操作：