響應式設計

在響應式網頁設計成為建立跨不同裝置型別網站的標準方法之前，網頁開發者曾經談論過移動網頁設計、移動網頁開發，或者有時，移動友好型設計。這些基本上與響應式網頁設計相同——目標是確保網站在具有不同物理屬性（螢幕尺寸、解析度）的裝置上都能良好執行，包括佈局、內容（文字和媒體）和效能。

區別主要在於所涉及的裝置以及建立解決方案的可用技術。

• 我們過去常常談論桌上型電腦或移動裝置，但現在有許多不同型別的裝置可用，例如桌上型電腦、筆記型電腦、行動電話、平板電腦、手錶等。我們不再需要針對少數幾種不同的螢幕尺寸進行設計，而是需要防禦性地設計網站，以滿足常見螢幕尺寸和解析度以及未知情況的需求。
• 在過去，移動裝置在 CPU/GPU 和可用頻寬方面功率較低。有些裝置不支援 CSS 甚至 HTML，因此，在為裝置提供能夠處理的網站之前，執行伺服器端瀏覽器嗅探以確定裝置/瀏覽器型別是很常見的做法。移動裝置通常會收到非常簡單、基本的體驗，因為這是它們所能處理的全部。如今，移動裝置能夠處理與臺式計算機相同的技術，因此此類技術變得不那麼常見了。
  • 您仍然應該使用本文中討論的技術為移動使用者提供合適的體驗，因為仍然存在電池續航時間和頻寬等限制需要考慮。
  • 使用者體驗也是一個值得關注的問題。例如，旅遊網站的移動使用者可能只想檢視航班時間和延誤資訊，而不是看到一個顯示航班路徑和公司歷史的 3D 動畫地球儀。但是，這可以透過響應式設計技術來處理。
• 現代技術更適合建立響應式體驗。例如，響應式影像/媒體技術 現在允許為不同的裝置提供適當的媒體，而無需依賴伺服器端嗅探等技術。

HTML 從根本上來說是響應式的，或稱流動的。如果您建立一個僅包含 HTML、不包含 CSS 的網頁，然後調整視窗大小，瀏覽器會自動重新調整文字以適應視口。

雖然預設的響應式行為可能聽起來不需要任何解決方案，但在寬顯示器上全屏顯示的長文字行可能難以閱讀。如果使用 CSS 縮短寬螢幕的行長度，例如透過建立列或新增大量填充，則對於縮小瀏覽器視窗或在移動裝置上開啟網站的使用者來說，網站可能會顯得擠壓。

透過設定固定寬度來建立不可調整大小的網頁也不起作用；這會導致窄裝置出現捲軸，而在寬螢幕上出現過多的空白。

響應式網頁設計或 RWD 是一種設計方法，它解決了各種裝置和裝置尺寸的範圍，能夠自動適應螢幕，無論內容是在平板電腦、手機、電視還是手錶上檢視。

響應式網頁設計不是一項單獨的技術——它是一種方法。它是一個術語，用於描述一組用於建立可以響應任何用於檢視內容的裝置的佈局的最佳實踐。

術語響應式設計由 Ethan Marcotte 於 2010 年提出，描述了使用流體網格、流體影像和媒體查詢來建立響應式內容，如 Zoe Mickley Gillenwater 的書籍 靈活的網頁設計 中所述。

當時，建議使用 CSS float 進行佈局，並使用媒體查詢查詢瀏覽器寬度，為不同的斷點建立佈局。流體影像設定為不超過其容器的寬度；它們的 max-width 屬性設定為 100%。當包含它們的列變窄時，流體影像會縮小，但當列變寬時，它們不會增長到超過其固有大小。這使得影像可以縮小以適應其內容，而不是溢位內容，但如果容器比影像寬，則不會增長並變得畫素化。

現代 CSS 佈局方法本質上是響應式的，並且，自從 Gillenwater 的書籍和 Marcotte 的文章發表以來，我們在 Web 平臺中添加了許多功能，使設計響應式網站變得更容易。

本文的其餘部分將引導您瞭解在建立響應式網站時可能希望使用的各種 Web 平臺功能。

媒體查詢 允許我們執行一系列測試（例如，使用者的螢幕是否大於某個寬度或某個解析度），並有選擇地應用 CSS 以根據使用者的需求適當地設定頁面樣式。

例如，以下媒體查詢測試當前網頁是否正在顯示為螢幕媒體（因此不是列印文件）並且視口寬度至少為 80rem。只有在滿足這兩點時，才會應用 .container 選擇器的 CSS。

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

您可以在樣式表中新增多個媒體查詢，調整整個佈局或其部分內容，以最適合各種螢幕尺寸。引入媒體查詢並更改佈局的點稱為斷點。

使用媒體查詢時，一種常見的方法是為窄螢幕裝置（例如手機）建立簡單的單列布局，然後檢查更寬的螢幕，並在知道有足夠的螢幕寬度可以處理時實現多列布局。針對移動裝置優先進行設計被稱為移動優先設計。

如果使用斷點，最佳實踐建議使用 相對單位 而不是單個裝置的絕對大小來定義媒體查詢斷點。

媒體查詢塊中定義的樣式有不同的方法；從使用媒體查詢到根據瀏覽器大小範圍使用 <link> 樣式表，再到僅包含自定義屬性變數以儲存與每個斷點關聯的值。

在 MDN 文件中瞭解更多關於 媒體查詢 的資訊。

媒體查詢可以幫助實現 RWD，但不是必需的。靈活的網格、相對單位以及最小和最大單位值可以在沒有查詢的情況下使用。

響應式網站構建在靈活的網格上，這意味著您不需要使用畫素完美的佈局來針對每個可能的裝置尺寸。

透過使用靈活的網格，您可以更改功能或新增斷點並在內容開始看起來不好的地方更改設計。例如，為了確保行長度不會隨著螢幕尺寸的增加而變得難以閱讀，您可以使用 columns；如果一個框在變窄時每行只有兩個單詞而顯得擠壓，您可以設定一個斷點。

包括 多列布局、Flexbox 和 Grid 在內的幾種佈局方法預設情況下都是響應式的。它們都假設您正在嘗試建立一個靈活的網格，併為您提供更簡單的方法來做到這一點。

使用多列，您可以指定一個 column-count 來指示您希望內容最多分成多少列。然後，瀏覽器會計算出這些列的大小，該大小會根據螢幕尺寸而變化。

.container {
  column-count: 3;
}

如果您改為指定 column-width，則您是在指定一個最小寬度。瀏覽器將建立儘可能多地適合容器的該寬度的列，然後在所有列之間共享剩餘的空間。因此，列的數量將根據可用空間的大小而變化。

.container {
  column-width: 10em;
}

您可以使用 columns 簡寫來提供最大列數和最小列寬。這可以確保行長度不會隨著螢幕尺寸的增加而變得難以閱讀，也不會隨著螢幕尺寸的減小而變得太窄。

在 Flexbox 中，Flex 專案會收縮或增長，根據其容器中的空間在專案之間分配空間。透過更改 flex-grow 和 flex-shrink 的值，您可以指示當專案遇到周圍更多或更少的空間時，您希望它們如何表現。

在下面的示例中，Flex 專案將在 Flex 容器中佔用相同數量的空間，使用 flex: 1 的簡寫，如佈局主題 Flexbox：Flex 專案的靈活大小 中所述。

.container {
  display: flex;
}

.item {
  flex: 1;
}

在 CSS 網格佈局中，fr 單位允許在網格軌道之間分配可用空間。下面的示例建立了一個具有三個大小為 1fr 的軌道的網格容器。這將建立三個列軌道，每個軌道佔用容器中可用空間的一部分。您可以在 Learn 佈局網格主題中，在 使用 fr 單位建立靈活的網格 下了解更多關於此方法的資訊。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

為了確保媒體永遠不會大於其響應式容器，可以使用以下方法

img,
picture,
video {
  max-width: 100%;
}

這會縮放媒體以確保它們永遠不會溢位其容器。使用單個大影像並將其縮小以適應小型裝置會浪費頻寬，因為下載的影像大於所需影像。

響應式影像，使用 <picture> 元素和 <img> 的 srcset 和 sizes 屬性，可以提供針對使用者視口和裝置解析度的影像。例如，您可以為移動裝置包含一個方形影像，但在臺式機上顯示相同的場景作為橫向影像。

<picture> 元素允許提供多種尺寸以及“提示”（描述影像最適合的螢幕尺寸和解析度的元資料），瀏覽器將為每個裝置選擇最合適的影像，確保使用者下載與其使用的裝置相匹配的影像尺寸。使用 <picture> 以及 max-width 可以避免使用媒體查詢來調整影像大小。它可以針對具有不同縱橫比的影像到不同的視口尺寸。

您還可以針對不同尺寸使用的影像進行藝術指導，從而為不同的螢幕尺寸提供不同的裁剪或完全不同的影像。

您可以在 MDN 上的“學習 HTML”部分找到關於響應式影像的詳細指南。

其他實用技巧

• 始終確保為網站影像使用適當的影像格式（例如 PNG 或 JPG），並在將影像放到網站上之前，使用圖形編輯器最佳化檔案大小。
• 您可以利用 CSS 功能（如漸變和陰影）來實現視覺效果，而無需使用影像。
• 您可以在巢狀在<video>/<audio> 元素內的<source> 元素的 media 屬性中使用媒體查詢，以便為不同裝置提供合適的影片/音訊檔案（響應式影片/音訊）。

響應式排版是指在媒體查詢中更改字型大小或使用視口單位來反映螢幕空間的減少或增加。

在這個示例中，我們希望將 1 級標題設定為 4rem，這意味著它將是我們基本字型大小的四倍。這是一個非常大的標題！我們只想在較大的螢幕尺寸上使用這個超大標題，因此我們首先建立一個較小的標題，然後使用媒體查詢在知道使用者螢幕尺寸至少為 1200px 時將其覆蓋為更大的尺寸。

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

我們修改了上面的響應式網格示例，使其也包含使用上述方法的響應式字型。您可以看到標題如何在佈局轉換為兩列版本時切換尺寸。

在手機上，標題較小

但在桌面電腦上，我們看到標題尺寸變大了

如此排版方法所示，您無需將媒體查詢限制為僅更改頁面佈局。它們可用於調整任何元素，使其在不同的螢幕尺寸下更易用或更具吸引力。

視口單位 vw 也可用於實現響應式排版，而無需使用媒體查詢設定斷點。1vw 等於視口寬度的百分之一，這意味著如果您使用 vw 設定字型大小，它將始終與視口的大小相關。

h1 {
  font-size: 6vw;
}

這樣做的缺點是，使用者將無法縮放使用 vw 單位設定的任何文字，因為該文字始終與視口的大小相關。因此，您永遠不應單獨使用視口單位設定文字。

有一個解決方案，它涉及使用calc()。如果您將 vw 單位新增到使用固定大小（如 em 或 rem）設定的值中，則文字仍然可以縮放。本質上，vw 單位會疊加在該縮放值之上。

h1 {
  font-size: calc(1.5rem + 3vw);
}

這意味著我們只需要為標題指定一次字型大小，而不是為移動裝置設定它並在媒體查詢中重新定義它。然後，隨著您增加視口的大小，字型也會逐漸增大。

如果您檢視響應式頁面的 HTML 原始碼，通常會在文件的 <head> 中看到以下<meta> 標籤。

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

此視口 元標記告訴移動瀏覽器應將視口的寬度設定為裝置寬度，並將文件縮放至其預期大小的 100%，從而顯示您預期的大小以進行移動裝置最佳化的文件。

為什麼需要這個？因為移動瀏覽器往往會謊報其視口寬度。

此元標記的存在是因為當智慧手機首次出現時，大多數網站都沒有針對移動裝置進行最佳化。因此，移動瀏覽器會將視口寬度設定為 980 畫素，以該寬度渲染頁面，並將結果顯示為桌面佈局的縮小版本。使用者可以放大和平移網站以檢視他們感興趣的部分，但看起來很糟糕。

透過設定 width=device-width，您將使用裝置的實際寬度覆蓋移動裝置的預設設定，例如 Apple 的預設 width=980px。如果沒有它，您的響應式設計（包括斷點和媒體查詢）可能無法在移動瀏覽器上按預期工作。如果您有一個在視口寬度 480px 或更小時生效的窄屏幕布局，但裝置表示其寬度為 980px，則使用者將看不到您的窄屏幕布局。

因此，您應始終在文件的頭部包含視口元標記。

響應式設計是指響應其檢視環境的網站或應用程式設計。它包含許多 CSS 和 HTML 功能和技術，現在基本上是我們預設構建網站的方式。考慮一下您在手機上訪問的網站 - 遇到縮小版的桌面版本或需要橫向滾動才能找到內容的網站可能相當罕見。這是因為網路已轉向這種響應式設計方法。

藉助您在本課程中學到的佈局方法，實現響應式設計也變得容易得多。如果您是今天剛接觸 Web 開發的新手，那麼您可用的工具比響應式設計早期多得多。因此，值得檢查您正在使用的任何資料的年齡。雖然歷史文章仍然有用，但現代的 CSS 和 HTML 使用方式使建立優雅且實用的設計變得更加容易，無論您的訪問者使用什麼裝置檢視網站。

• 使用觸控式螢幕裝置
  • 觸控事件 提供瞭解釋觸控式螢幕或觸控板上手指（或觸筆）活動的能力，從而為複雜的基於觸控的使用者介面提供高質量的支援。
  • 使用pointer 或any-pointer 媒體查詢在支援觸控的裝置上載入不同的 CSS。
• CSS-Tricks 媒體查詢指南

• 上一頁
• 概述：CSS 佈局
• 下一頁