在今天的移動設備時代中，網站的響應式設計變得越來越重要，因為越來越多的用戶使用各種設備訪問網站。CSS媒體查詢是一個很好的解決方案，它可以使網站在不同設備上自動適應。

媒體查詢是一個CSS3模塊，用于根據設備的尺寸和特征來應用不同的樣式。這個模塊可以用來針對不同的設備類型和尺寸設定不同的樣式。例如：

/* 在設備的屏幕寬度小于等于800像素時應用這些樣式 */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.container {
width: 90%;
margin: 0 auto;
}
}

上面的樣式將在屏幕寬度小于等于800像素時應用。這意味著這樣的樣式可以適用于手機、平板電腦以及普通計算機。

媒體查詢中的斷點是指在哪個寬度上應該改變樣式。我們可以根據設計把斷點設定在多個不同的寬度上，例如：

/* 在設備的屏幕寬度小于等于480像素時應用這些樣式 */
@media (max-width: 480px) {
/* 在這里寫樣式 */
}
/* 在設備的屏幕寬度大于480像素但小于等于800像素時應用這些樣式 */
@media (min-width: 481px) and (max-width: 800px) {
/* 在這里寫樣式 */
}
/* 在設備的屏幕寬度大于800像素時應用這些樣式 */
@media (min-width: 801px) {
/* 在這里寫樣式 */
}

上面的示例中，第一個媒體查詢在480像素的寬度上斷開，第二個在481像素的寬度上開始，第三個在801像素的寬度上開始。

在響應式設計中，我們可以使用這種方式來適應各種設備。我們可以根據設計建議設定斷點，在每個斷點上調整樣式。這樣，我們的網站就可以在各種設備上具有更好的用戶體驗。