在現代的Web開發中，隨著移動設備使用率的不斷提高，響應式網頁設計成為了越來越受歡迎的一種方式。為了達到不同設備的優化顯示效果，媒體查詢CSS成為了Web開發人員必須掌握的技能之一。

@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 16px;
}
}

我們可以看到，這是一個簡單的媒體查詢CSS代碼塊。其中，@media用于定義一個媒體查詢，(min-width: 768px) and (max-width: 1024px)用于定義在設備寬度在768px至1024px之間時生效的樣式，body選擇器用于定義對頁面元素的樣式。

這里的樣式是font-size: 16px，也就是說，在設備寬度在768px至1024px之間時，頁面的字體大小將變為16px。這就是媒體查詢CSS的一個應用場景。

除了設備寬度，媒體查詢CSS還可以根據其他標準來定義樣式。例如，我們可以根據設備屏幕比例、設備方向、設備分辨率等來定制不同的樣式。

@media (orientation: landscape) {
/* 在橫屏模式下應用的樣式 */
}
@media screen and (max-width: 480px) {
/* 在寬度小于480px的屏幕上應用樣式 */
}
@media print {
/* 在打印時應用的樣式 */
}

通過使用媒體查詢CSS，我們可以針對不同的設備、不同的場景，定義出對應的樣式。這不僅可以提高用戶體驗，也能讓我們的頁面更加具有適應性和可拓展性。