在網頁設計中，背景顏色是非常重要的一個元素。在許多情況下，我們需要在不同的頁面或區域中用不同的背景顏色來區分不同的內容。 然而，當頁面或瀏覽器尺寸發生變化時，這些背景顏色通常需要手動調整，這對網頁設計師來說是一項繁瑣的任務。那么，有沒有一種方法可以自動調整背景顏色呢？

答案是肯定的。我們可以使用一些簡單的 CSS 代碼來實現自動調整背景顏色的功能。具體來說，我們可以使用媒體查詢以及 CSS 變量來處理不同的背景顏色情況。

首先，我們需要定義一個 CSS 變量，該變量將作為頁面背景顏色使用。我們可以使用以下代碼定義變量：

:root {
--bg-color: #fff;
}

此代碼中，我們定義了一個名為“--bg-color”的變量，并將其設置為白色（#fff）。現在，我們可以在 CSS 中使用此變量作為頁面背景顏色。例如：

body {
background-color: var(--bg-color);
}

在這個示例中，我們將頁面背景顏色設置為“--bg-color”變量的值。這樣，當頁面呈現時，頁面背景顏色將被設置為白色。但是現在，問題是如何根據不同的情況更改變量的值以實現自動調整背景顏色呢？

這時，我們可以使用媒體查詢。例如，我們可以在以下代碼中使用媒體查詢以在屏幕寬度小于 768 像素時將“--bg-color”變量的值更改為紅色：

@media screen and (max-width: 768px) {
:root {
--bg-color: #f00;
}
}

在這個示例中，我們使用了 @media 媒體查詢，它指定了僅在屏幕寬度小于 768 像素時應用這些 CSS 規則。在規則內部，我們將“--bg-color”變量的值更改為紅色（#f00）。這樣，在屏幕寬度小于 768 像素時，頁面背景顏色將自動更改為紅色。

通過這種方式，我們就可以使用 CSS 變量和媒體查詢來實現背景顏色的自動調整。這讓網頁設計變得更加靈活和智能，避免了手動調整背景顏色的繁瑣工作。