CSS 媒體查詢在響應式網站開發中扮演了非常重要的角色，他允許我們根據不同屏幕尺寸應用不同的 CSS 樣式。

下面是一個簡單的媒體查詢的代碼演示：

/* 設備寬度小于等于 768px */
@media (max-width: 768px) { 
body {
background-color: red;
}
}
/* 設備寬度在 768px 至 1024px 之間 */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: green;
}
}
/* 設備寬度大于等于 1024px */
@media (min-width: 1024px) {
body {
background-color: blue;
}
}

上述代碼演示了三個不同的媒體查詢，他們分別對應不同屏幕尺寸。這個演示中使用了設備寬度來匹配屏幕尺寸，但也可以使用其他的媒體查詢條件，例如設備高度、設備方向、設備分辨率等等。

當瀏覽器中顯示的頁面尺寸滿足某個媒體查詢條件時，裝用這個條件的 CSS 樣式就會被應用，否則就不會被應用。這個機制允許我們編寫支持各種屏幕尺寸的響應式網站。