CSS是前端開發中重要的一部分，它可以幫助我們美化網頁，提高用戶體驗。在不同的屏幕尺寸上，CSS也可以幫助我們自適應地展示頁面，提升網頁的可用性。接下來，我們將討論如何使用CSS區分屏幕大小。

/* 定義屏幕尺寸 */
@media screen and (max-width: 768px) {
/* 在768px以下的屏幕尺寸應用以下樣式 */
body {
background-color: yellow;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 在769px-1024px之間的屏幕尺寸應用以下樣式 */
body {
background-color: blue;
}
}
@media screen and (min-width: 1025px) {
/* 在1025px及以上的屏幕尺寸應用以下樣式 */
body {
background-color: green;
}
}

在上述代碼中，我們使用@media查詢來定義不同屏幕尺寸下的CSS樣式。通過查詢@media screen并且(max-width: 768px)，我們可以定義在768px以下的屏幕尺寸下應用的樣式。同樣，我們可以定義在769px-1024px，1025px及以上的屏幕尺寸下應用的樣式。

在使用@media查詢時，需要注意以下幾點：

• 將媒體查詢放在樣式表的最后一項
• 媒體查詢中的樣式將覆蓋之前的樣式
• 查詢順序非常重要，在樣式重疊時，CSS將根據查詢順序來確定使用哪個樣式

通過使用@media查詢，我們可以為不同尺寸的屏幕定制不同的CSS樣式，提高網頁的可用性和用戶體驗。在進行網頁開發時，需要考慮不同屏幕尺寸下的展示效果，這樣我們才能真正實現自適應的網頁設計，滿足用戶的需求。