CSS是前端開發中最常用的技術之一，它有許多強大的功能。其中之一是根據分辨率自動調整排版和布局。在這篇文章中，我們將介紹如何使用CSS根據不同的分辨率來實現響應式設計的效果。

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}

在上面的代碼中，我們使用@media查詢來定義CSS規則。它允許我們根據不同的媒體類型和特定的分辨率來為不同的設備設計不同的樣式。在這個例子中，我們為最大寬度為600像素的屏幕定義了一個新的字體大小。

@media screen and (min-width: 600px) and (max-width: 900px) {
.container {
width: 600px;
}
}
@media screen and (min-width: 900px) {
.container {
width: 900px;
}
}

在這個例子中，我們在不同的屏幕寬度上定義了不同的容器寬度。如果屏幕寬度小于600像素，則容器寬度為100％。如果屏幕寬度在600像素到900像素之間，容器寬度為600像素。如果屏幕寬度大于900像素，則容器寬度為900像素。

通過使用CSS根據分辨率自動調整排版和布局，您可以為不同的設備和屏幕提供更好的用戶體驗。這對于移動設備和桌面瀏覽器來說都是非常重要的，因為它可以確保您的網站在任何設備上都能夠顯示完美。