隨著不同設備的出現以及越來越多的分辨率，我們需要確保我們的網站能夠適應這些不同的分辨率。這意味著在開發網站時，我們需要考慮如何根據分辨率調整 CSS。

幸運的是，有一些技術可以幫助我們做到這一點。下面我們將介紹其中的幾種方法。

使用媒體查詢

@media screen and (max-width: 600px) {
/* 當屏幕寬度小于或等于600px時，應用以下樣式 */
body {
background-color: blue;
}
}

媒體查詢允許我們在特定條件下應用不同的 CSS 樣式。在上面的示例中，我們使用`@media` 聲明來指定屏幕的最大寬度，并在滿足這個條件時改變頁面的背景顏色。

使用動態單位

body {
font-size: calc(16px + 0.5vw);
}

另一種方式是使用動態單位（如`vw`、`vh` 或`rem`）。這些單位基于用戶當前瀏覽器窗口的大小。比如上面的示例中，我們使用`vw`（視口寬度）作為文本的單位。這意味著無論屏幕的大小如何，文本的大小都將隨著瀏覽器窗口的大小而變化。

使用 JavaScript

const body = document.querySelector('body');
const width = window.innerWidth;
if (width< 600) {
body.style.backgroundColor = 'blue';
}

最后，我們還可以使用 JavaScript 檢測用戶的屏幕寬度并根據結果應用相應的 CSS 樣式。

以上是幾種根據分辨率調整 CSS 的方法，您可以根據自己的需求選擇適合您的方法。