CSS 媒體查詢?cè)陧憫?yīng)式網(wǎng)站開發(fā)中扮演了非常重要的角色，他允許我們根據(jù)不同屏幕尺寸應(yīng)用不同的 CSS 樣式。

下面是一個(gè)簡(jiǎn)單的媒體查詢的代碼演示：

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

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

當(dāng)瀏覽器中顯示的頁面尺寸滿足某個(gè)媒體查詢條件時(shí)，裝用這個(gè)條件的 CSS 樣式就會(huì)被應(yīng)用，否則就不會(huì)被應(yīng)用。這個(gè)機(jī)制允許我們編寫支持各種屏幕尺寸的響應(yīng)式網(wǎng)站。