響應式網頁設計
響應式網頁設計（Responsive Web Design，RWD）是一種網頁設計方法，旨在使網頁在所有螢幕尺寸和解析度下都能良好地呈現，同時確保良好的可用性。這是一種為多裝置網路進行設計的方式。在本文中，我們將幫助你瞭解一些可以用來掌握響應式設計的技術。
| 預備知識 | 使用 HTML 構造內容、CSS 樣式基礎、文字和字型樣式基礎，熟悉CSS 佈局基本概念。 |
|---|---|
| 學習成果 |
|
響應式設計的前身：移動網頁設計
在響應式網頁設計成為使網站跨不同裝置型別工作的標準方法之前，Web 開發人員過去常常談論移動網頁設計、移動網頁開發，或者有時是移動友好設計。這些基本上與響應式網頁設計相同——目標是確保網站在佈局、內容（文字和媒體）和效能方面，能夠在具有不同物理屬性（螢幕尺寸、解析度）的裝置上良好地工作。
區別主要在於所涉及的裝置以及可用於建立解決方案的技術。
- 我們過去常說桌面裝置或移動裝置，但現在有許多不同型別的裝置，如桌上型電腦、筆記型電腦、手機、平板電腦、手錶等。我們現在需要防禦性地設計網站，以適應常見的螢幕尺寸和解析度，以及未知的情況，而不是僅僅迎合幾種不同的螢幕尺寸。
- 過去的移動裝置在 CPU/GPU 和可用頻寬方面效能較低。有些甚至不支援 CSS 甚至 HTML，因此，通常會進行伺服器端瀏覽器嗅探來確定裝置/瀏覽器型別，然後再提供裝置能夠處理的網站。移動裝置通常只能獲得非常簡單、基礎的體驗，因為這是它們所能處理的全部。如今，移動裝置能夠處理與臺式計算機相同的技術，因此這類技術已不那麼常見了。
- 你仍然應該使用本文中討論的技術來為移動使用者提供合適的體驗，因為仍然存在電池壽命和頻寬等限制需要考慮。
- 使用者體驗仍然是一個需要關注的問題。例如，一個旅遊網站的移動使用者可能只想查詢航班時間和延誤資訊，而不是看到一個展示飛行路徑和公司歷史的 3D 動畫地球。
- 現代技術在建立響應式體驗方面要好得多。例如，響應式圖片/媒體技術現在允許向不同裝置提供適當的媒體，而無需依賴伺服器端嗅探等技術。
響應式網頁設計簡介
HTML 本質上是響應式的，或者說是流式的。如果你建立一個只包含 HTML 而沒有 CSS 的網頁，並調整視窗大小，瀏覽器會自動重排文字以適應視口。
雖然預設的響應式行為聽起來似乎不需要任何解決方案，但在寬屏顯示器上全屏顯示的長行文字可能難以閱讀。這個問題可以透過 CSS 來解決，例如建立窄列來限制行長。然而，這可能會給那些縮小瀏覽器視窗或在移動裝置上檢視網站的使用者帶來新問題——這些列會看起來被擠壓，變得更難閱讀。
透過設定固定寬度來建立不可調整大小的網頁也不可行；這會導致在窄裝置上出現捲軸，在寬螢幕上則有太多空白空間。
響應式網頁設計（RWD）是一種設計方法，它解決了所有可用裝置和裝置尺寸範圍的問題，使內容能夠自動適應螢幕，無論是在平板電腦、手機、電視還是手錶上檢視。
響應式網頁設計不是一項獨立的技術——它是一種方法。它是一個術語，用來描述一套用於建立能夠響應任何用於檢視內容的裝置的佈局的最佳實踐。
響應式設計這個術語由 Ethan Marcotte 在 2010 年創造，描述了使用流式網格、流式圖片和媒體查詢來建立響應式內容。
當時，建議是使用 CSS float 進行佈局，並使用媒體查詢來查詢瀏覽器寬度，為不同的斷點建立佈局。流式圖片被設定為不超過其容器的寬度；它們的 max-width 屬性被設定為 100%。當其包含的列變窄時，流式圖片會縮小，但當列變寬時，它們不會變得比其固有尺寸更大。這使得圖片能夠縮小以適應其內容，而不是溢位，但如果容器變得比圖片更寬，圖片也不會變大而出現畫素化。
現代 CSS 佈局方法本身就是響應式的，並且自從 Marcotte 的文章發表以來，Web 平臺內建了大量功能，使得設計響應式網站變得更加容易。
本文的其餘部分將解釋在建立響應式網站時你可能想要使用的各種 Web 平臺功能。
媒體查詢
媒體查詢允許我們執行一系列測試（例如，使用者的螢幕寬度或解析度是否大於某個值），並有選擇地應用 CSS 來適當地為使用者的需求設定頁面樣式。
例如，以下媒體查詢測試當前網頁是否以螢幕媒體（因此不是列印文件）顯示，並且視口寬度至少為 80rem。只有在這兩個條件都為真時，.container 規則才會應用。
@media screen and (width >= 80rem) {
.container {
margin: 1em 2em;
}
}
你可以在一個樣式表中新增多個媒體查詢，調整整個佈局或其部分，以最好地適應各種螢幕尺寸。引入媒體查詢並改變佈局的點被稱為斷點。
使用媒體查詢時，一種常見的方法是為窄屏裝置（例如手機）建立一個簡單的單列布局，然後檢查更寬的螢幕，並在知道有足夠的螢幕寬度來處理它時，實現一個多列布局。優先為移動裝置設計被稱為移動優先設計。
如果使用斷點，最佳實踐鼓勵使用相對單位來定義媒體查詢斷點，而不是單個裝置的絕對尺寸。
媒體查詢塊內定義的樣式有不同的方法；從使用媒體查詢根據瀏覽器尺寸範圍<link>樣式表，到僅包含用於儲存與每個斷點相關值的自定義屬性變數。
媒體查詢可以幫助實現 RWD，但不是必須的。靈活的網格、相對單位以及最小和最大單位值可以在沒有媒體查詢的情況下使用。
備註： Scrimba 有一個名為旁註：媒體查詢 MDN 學習合作伙伴 的教程，它提供了媒體查詢的互動式介紹，以及一個挑戰來測試你是否理解基礎知識。
響應式佈局技術
響應式網站建立在靈活的網格之上，這意味著你不需要針對每一種可能的裝置尺寸進行畫素完美的佈局。
透過使用靈活的網格，你可以在內容開始看起來不佳時更改某個特性或新增一個斷點來改變設計。例如，為了確保隨著螢幕尺寸增加行長不會變得難以閱讀，你可以使用 columns；如果一個盒子在變窄時被擠壓成每行只有兩個詞，你可以設定一個斷點。
包括 Flexbox 和 CSS 網格在內的幾種佈局方法預設就是響應式的。它們都假設你正在嘗試建立一個靈活的網格，併為你提供了更簡單的方法來實現。
Flexbox
在 flexbox 中，flex 專案會縮小或增長，根據其容器中的空間來分配專案之間的空間。透過更改 flex-grow 和 flex-shrink 的值，你可以指示當專案周圍遇到更多或更少空間時，你希望它們如何表現。
在下面的示例中，flex 專案將在 flex 容器中各佔等量的空間，使用之前討論過的 flex: 1 簡寫（參見 Flexbox：Flex 專案的靈活尺寸）。
.container {
display: flex;
}
.item {
flex: 1;
}
以下是我們如何將 flexbox 與媒體查詢結合用於響應式設計。
<div class="wrapper">
<div class="col1">
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
@media screen and (width >= 600px) {
.wrapper {
display: flex;
}
.col1 {
flex: 1;
margin-right: 5%;
}
.col2 {
flex: 2;
}
}
調整你的瀏覽器視窗大小。當上述示例的尺寸超過 600px 寬度閾值時，佈局將在單列和兩列布局之間切換。
CSS 網格
在 CSS 網格佈局中，fr 單位允許在網格軌道之間分配可用空間。下一個示例建立了一個具有三個尺寸為 1fr 的軌道的網格容器。這將建立三個列軌道，每個軌道佔據容器中可用空間的一部分。你已經看過這種方法（回顧請參見 使用 fr 單位的靈活網格）。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
以下是我們如何將網格佈局與媒體查詢結合用於響應式設計。
<div class="wrapper">
<div class="col1">
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
@media screen and (width >= 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}
再次嘗試調整你的瀏覽器視窗大小——你應該會看到示例佈局在 600px 寬度閾值處發生變化，與前一個示例的方式相同。
響應式圖片/媒體
為確保媒體永遠不會大於其響應式容器，可以使用以下方法：
img,
picture,
video {
max-width: 100%;
}
這會縮放媒體元素，以確保它們永遠不會溢位其容器。
備註： 使用一張大圖並將其縮小以適應小裝置會浪費頻寬，因為下載了比需要更大的圖片。它也可能看起來不好——例如，一張橫向圖片在寬屏顯示器上可能看起來不錯，但在移動裝置上可能難以看清，而移動裝置更適合縱向圖片。這類問題可以使用 <picture> 元素和 <img> 的 srcset 和 sizes 屬性來解決。這些是高階功能，超出了本課程的範圍，但你可以在響應式圖片中找到詳細指南。
其他有用的提示
響應式排版
響應式排版描述了在媒體查詢中改變字型大小，或使用視口單位來反映螢幕空間的多少。
使用媒體查詢實現響應式排版
在這個例子中，我們想將一級標題設定為 4rem，這意味著它將是我們基礎字型大小的四倍。這是一個非常大的標題！我們只希望這個巨大的標題出現在較大的螢幕尺寸上，因此我們首先給標題一個較小的尺寸 2rem，然後使用媒體查詢，如果我們知道使用者的螢幕寬度至少為 1200px，就用較大的尺寸覆蓋它。
html {
font-size: 1em;
}
h1 {
font-size: 2rem;
}
@media (width >= 1200px) {
h1 {
font-size: 4rem;
}
}
下一個示例是我們早期響應式網格示例的修改版，它包含了使用上述方法的響應式標題。在移動裝置上標題較小，但在桌面裝置上，我們看到較大的標題尺寸。
<div class="wrapper">
<div class="col1">
<h1>Watch my size!</h1>
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of
millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</p>
</div>
</div>
html {
font-size: 1em;
}
body {
font:
1.2em "Helvetica",
"Arial",
sans-serif;
margin: 20px;
padding: 0;
background-color: #eeeeee;
}
.wrapper {
max-width: 960px;
margin: 2em auto;
}
h1 {
font-size: 2rem;
margin: 0;
}
.col1,
.col2 {
background-color: white;
}
@media screen and (width >= 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
h1 {
font-size: 4rem;
}
}
與之前的示例一樣，嘗試改變瀏覽器視窗的寬度，並注意不僅佈局在 600px 寬度閾值處發生變化，標題大小也發生了變化。
正如這種排版方法所示，你不需要將媒體查詢限制在僅改變頁面佈局上。它們可以用來調整任何元素，使其在不同的螢幕尺寸下更具可用性或更具吸引力。
使用視口單位實現響應式排版
視口單位 vw 也可以用來實現響應式排版，而無需使用媒體查詢設定斷點。1vw 等於視口寬度的百分之一，這意味著如果你使用 vw 設定字型大小，它將始終與視口的大小相關聯。
h1 {
font-size: 6vw;
}
上述做法的問題在於，使用者失去了縮放任何使用 vw 單位設定的文字的能力，因為該文字始終與視口的大小相關。因此，你不應該單獨使用視口單位來設定文字。
有一個解決方案，它涉及到使用 calc()。如果你將 vw 單位新增到一個使用固定大小（如 em 或 rem）設定的值上，那麼文字仍然可以縮放。本質上，vw 單位是在那個縮放後的值之上新增的。
h1 {
font-size: calc(1.5rem + 4vw);
}
這意味著我們只需要為標題指定一次字型大小，而不需要為移動裝置設定一次，然後在媒體查詢中重新定義它。然後，隨著你增加視口的大小，字型會逐漸增大。
<div class="wrapper">
<div class="col1">
<h1>Watch my size!</h1>
<p>
This layout is responsive. See what happens if you make the browser window
wider or narrow.
</p>
</div>
<div class="col2">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery.
</p>
</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
margin: 20px;
padding: 0;
background-color: #eeeeee;
}
.wrapper {
max-width: 960px;
margin: 2em auto;
}
h1 {
font-size: calc(1.5rem + 4vw);
margin: 0;
}
.col1,
.col2 {
background-color: white;
}
@media screen and (width >= 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}
像之前一樣，嘗試調整瀏覽器視窗的大小，並注意這次標題大小如何隨著寬度的變化而逐漸增大。
視口 meta 標籤
如果你檢視一個響應式頁面的 HTML 原始碼，你通常會在文件的 <head> 中看到以下 <meta> 標籤。
<meta name="viewport" content="width=device-width,initial-scale=1" />
這個viewport meta 標籤告訴移動瀏覽器，它們應該將視口的寬度設定為裝置的寬度，並將文件縮放到其預期大小的 100%，這會以你期望的移動最佳化尺寸來顯示文件。
為什麼需要這個？因為移動瀏覽器傾向於謊報它們的視口寬度。
這個 meta 標籤之所以存在，是因為當智慧手機剛出現時，大多數網站都沒有進行移動最佳化。因此，移動瀏覽器會將視口寬度設定為 980 畫素，以該寬度渲染頁面，並顯示一個縮小的桌面佈局版本。使用者可以放大和平移網站來檢視他們感興趣的部分，但這看起來很糟糕。
透過設定 width=device-width，你將覆蓋移動裝置的預設值，比如 iPhone 的預設 width=980px，替換為裝置的實際寬度。沒有它，你帶有斷點和媒體查詢的響應式設計可能無法在移動瀏覽器上按預期工作。如果你有一個在 480px 或更小視口寬度下生效的窄屏佈局，但裝置卻說它的寬度是 980px，那麼該使用者將看不到你的窄屏佈局。
所以你應該始終在你的文件頭部包含 viewport meta 標籤。
你還可以在 viewport meta 標籤的 content 屬性中放入許多其他選項——更多細節請參見 <meta name="viewport"> 參考。
總結
響應式設計指的是一個能夠響應其檢視環境的網站或應用程式設計。它包含了許多 CSS 和 HTML 的特性和技術，並且基本上是我們預設構建網站的方式。想想你在手機上訪問的網站——遇到一個縮小版的桌面網站，或者需要橫向滾動才能找到東西的情況可能相當少見。這是因為 Web 已經轉向了這種響應式設計的方法。
藉助於本文所涵蓋的佈局方法，實現響應式設計也變得容易得多。如果你今天剛接觸 Web 開發，你擁有的工具比響應式設計早期要多得多。因此，檢查你正在使用的任何材料的年代是值得的。雖然歷史文章仍然有用，但現代 CSS 和 HTML 的使用使得建立優雅而有用的設計變得更加容易，無論你的訪問者使用什麼裝置檢視網站。
接下來，我們將更詳細地研究媒體查詢，並展示如何使用它們來解決一些常見問題。
另見
- 與觸控式螢幕裝置協同工作
- 觸控事件提供了在觸控式螢幕或觸控板上解釋手指（或觸控筆）活動的能力，從而為複雜的基於觸控的使用者介面提供高質量支援。
- 使用 pointer 或 any-pointer 媒體查詢在支援觸控的裝置上載入不同的 CSS。
- CSS-Tricks 的媒體查詢指南
- Scrimba 的前端開發者職業路徑 MDN 學習合作伙伴 教授你成為一名稱職的前端 Web 開發人員所需知道的一切，課程包含有趣的互動課程和挑戰、知識淵博的老師以及一個互助的社群。從零開始，直到找到你的第一份前端工作！課程的許多組成部分都提供獨立的免費版本。其中包括一個關於響應式設計的模組。