許多網站會要求大量資源 (例如未針對某些螢幕進行最佳化的圖片)，並傳送大型 CSS 檔案，其中包含部分裝置一律不會使用的樣式。使用媒體查詢時，許多人會使用媒體查詢，將特製的樣式表和素材資源提供給不同畫面，以減少傳輸給使用者的資料量，並提高網頁載入速度。本指南將介紹如何使用媒體查詢傳送符合需求的圖片 (通常稱為「回應式圖片」的技術)。
必要條件
本指南假設您已熟悉 Chrome 開發人員工具。你也可以視需要改用其他瀏覽器的開發人員工具。您只需將本指南中的 Chrome 開發人員工具螢幕截圖對應至所選瀏覽器的相關功能即可。
瞭解回應式背景圖片
首先，分析未最佳化客層的網路流量：
- 在新的 Chrome 分頁中開啟未最佳化試用版。
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 重新載入網頁。
您會看到系統要求的唯一圖片是 background-desktop.jpg，其大小為 1006KB：
調整瀏覽器視窗的大小，並留意「網路記錄」未顯示網頁提出的任何新要求。這表示無論螢幕大小為何，都使用相同的圖片背景。
您可以在 style.css 中查看控制背景圖片的樣式：
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
以下是每個使用屬性的意義：
background-position: center center：將圖片垂直及水平置中。background-repeat: no-repeat：只顯示圖片一次。background-attachment: fixed：避免讓背景圖片捲動。background-size: cover：調整圖片大小，以涵蓋整個容器。background-image: url(images/background-desktop.jpg)：圖片的網址。
組合完成後，這些樣式就會指示瀏覽器根據不同的螢幕高度和寬度調整背景圖片。這是實現回應式背景的第一步。
針對所有螢幕大小使用同一張背景圖片有一些限制：
- 無論螢幕大小為何，傳送的位元組數量都相同。即使在某些裝置 (如手機) 中，較小型、較小型的圖片背景看起來最好。一般來說，建議您傳送最小的最小圖片，仍可以在使用者螢幕上正常顯示，以便改善效能及儲存使用者資料。
- 在小型裝置上，系統會拉長或裁切圖片來覆蓋整個螢幕，但使用者可能會因此遮蓋背景的相關部分。
在下一節中，您將瞭解如何根據使用者的裝置套用最佳化設定，載入不同的背景圖片。
使用媒體查詢
如要宣告僅適用於特定媒體或裝置類型的樣式表，使用媒體查詢是相當常見的技巧。實作方式是使用 @media 規則實作，可讓您定義一組指定樣式的中斷點。符合 @media 規則定義的條件 (例如特定螢幕寬度) 時，系統會套用中斷點定義的樣式群組。
下列步驟可用於將媒體查詢套用到網站，以便根據要求網頁的裝置最大寬度使用不同的圖片。
- 在
style.css中移除包含背景圖片網址的那一行：
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- 接著，根據行動裝置、平板電腦和電腦螢幕通常以像素為單位的常見尺寸 (以像素為單位)，為每個螢幕寬度建立中斷點：
行動裝置：
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
平板電腦：
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
電腦裝置：
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
在瀏覽器中開啟最佳化的 style.css 版本，查看所做的變更。
評估各種裝置
我們接下來要以視覺化的方式，呈現網站在不同螢幕尺寸及模擬行動裝置上顯示的網站：
- 在新的 Chrome 分頁中開啟最佳化網站。
- 將可視區域縮小 (小於
480px)。 - 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 重新載入頁面。
請注意如何要求
background-mobile.jpg圖片。 - 將可視區域加寬。當寬度超過
480px時，您會發現background-tablet.jpg的要求方式。當寬度超過1025px時，您會發現background-desktop.jpg的要求方式。
當瀏覽器螢幕寬度發生變更時，就會要求新的圖片。
請特別注意，如果寬度低於行動裝置中斷點 (480 像素) 中定義的值，您會看到以下網路記錄：
新的行動版背景比電腦版背景小小 67%。
對最大內容繪製 (LCP) 的影響
含有 CSS 背景圖片的元素可視為最大內容繪製 (LCP) 的候選項目，但瀏覽器預先載入掃描器無法找到 CSS 背景圖片，因此如果您不夠謹慎，就可能延遲網站的 LCP。
您應考量第一個選項，也就是 LCP 候選圖片是否能在含有 srcset 和 sizes 屬性的 <img> 元素中運作，以確保回應時間。瀏覽器預先載入掃描器會找到 <img> 元素，並在剖析器遭到封鎖時為這些元素傳送要求。
如果您無法 (或不想) 避免使用 CSS 背景圖片，第二個選項則是預先載入回應式圖片，以確保您預先載入正確圖片來符合適當的可視區域大小。<link> 元素 media、imagesrcset 和 imagesizes 會提示瀏覽器，提示特定資源提示僅適用於特定可視區域條件，因此如果只想載入一個適合目前可視區域的資源，避免多次載入不必要的預先載入。
摘要
在這份指南中，您已學會如何套用媒體查詢，要求針對特定螢幕尺寸調整背景圖片，以及在手機 (例如手機) 上存取網站時可以節省位元組數。
您使用 @media 規則實作回應式背景。所有瀏覽器廣泛支援這項技術。全新 CSS 功能：image-set()，只需要少量的程式碼就能實現相同用途。在本文撰寫期間，並非所有瀏覽器都支援這項功能，但建議您留意採用方式不斷改進的地方，因為這代表這項技術的另一個替代方案。