CSS媒體查詢是一種根據用戶設備的不同特性應用不同樣式的機制。通過使用媒體查詢，我們可以根據設備屏幕的大小、方向、分辨率、顏色等參數來選擇不同的樣式，從而實現響應式布局。

/* 以下是一個基本的媒體查詢示例 */
@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于768px時應用這里的樣式 */
body {
background-color: pink;
}
}
@media (orientation: landscape) {
/* 當設備為橫向方向時應用這里的樣式 */
.container {
display: flex;
}
}
@media all and (max-width: 480px) and (orientation: portrait) {
/* 當屏幕寬度小于等于480px且為豎向方向時應用這里的樣式 */
.menu {
display: block;
}
}

上述代碼中，“@media”表示媒體查詢的開始標識，“screen”表示查詢的媒體類型為屏幕，“max-width”表示查詢條件為屏幕寬度小于等于768px，“orientation”表示查詢條件為設備為橫向方向，“all”表示查詢類型為所有。在括號內指定多個查詢條件時使用邏輯運算符“and”。

需要注意的是，我們應該先編寫針對較小屏幕的樣式，再逐漸增加媒體查詢的條件，以確保樣式的有效性和兼容性。

總之，CSS媒體查詢是前端開發中必不可少的重要工具，學習和掌握媒體查詢的使用方式可以幫助我們為不同設備提供最佳的用戶體驗。