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

/* 以下是一個基本的媒體查詢示例 */
@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”表示查詢類型為所有。在括號內(nèi)指定多個查詢條件時使用邏輯運算符“and”。

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

總之，CSS媒體查詢是前端開發(fā)中必不可少的重要工具，學習和掌握媒體查詢的使用方式可以幫助我們?yōu)椴煌O備提供最佳的用戶體驗。