CSS媒體查詢是一種用于制作響應式網站的技術。當網站在不同的設備上顯示時，我們可以通過媒體查詢來調整顯示方式，提高用戶體驗。

媒體查詢可以根據設備屏幕大小、設備方向和設備類型等多種條件來判斷，并根據判斷結果展示不同的CSS樣式。在CSS中，我們使用@media關鍵字來定義媒體查詢。

@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于768px時，執行下面的樣式 */
body {
background-color: #f2f2f2;
}
}

在上述代碼中，@media表示一個媒體查詢的開始，screen表示查詢設備屏幕，max-width: 768px表示當屏幕寬度小于等于768px時執行下面的樣式。在花括號{}中的樣式將只在上述條件下生效。

下面是一些常見的媒體查詢：

/* 電腦屏幕 */
@media screen and (min-width: 992px) {
/* 樣式 */
}
/* 平板屏幕 */
@media screen and (min-width: 768px) and (max-width: 991px) {
/* 樣式 */
}
/* 手機屏幕 */
@media screen and (max-width: 767px) {
/* 樣式 */
}
/* 橫屏方向 */
@media screen and (orientation: landscape) {
/* 樣式 */
}
/* 豎屏方向 */
@media screen and (orientation: portrait) {
/* 樣式 */
}

以上是一些媒體查詢的示例，可以根據實際需求進行修改。在制作響應式網站時，媒體查詢給了我們很大的靈活性，讓網站更加友好、易用。