在前端開發中，我們經常需要讓網頁能夠適應不同的屏幕尺寸，以讓我們的網站能夠在不同的設備上呈現出最佳效果。這就是CSS媒體查詢的作用所在。CSS媒體查詢能夠根據不同的設備尺寸和分辨率，為網頁應用不同的CSS樣式，以達到讓網頁適應不同設備的效果。下面我們就來看看如何使用CSS媒體查詢：

@media screen and (max-width: 480px) {
// CSS代碼
}

以上代碼中，我們使用media關鍵字來申明媒體查詢，它告訴瀏覽器：這是一段針對特定媒體類型的CSS樣式。而在括號中，我們定義了一個條件，告訴瀏覽器，如果屏幕最大寬度小于等于480像素，就應用這段CSS代碼。同時，我們使用了Pre標簽來展示CSS代碼。

除了屏幕尺寸外，我們還可以根據不同的屏幕方向，設備類型（如打印機和屏幕等）等條件來使用媒體查詢，以適應不同設備的需求。下面是一個根據設備方向應用不同樣式的例子：

@media screen and (orientation: landscape) {
// CSS代碼
}
@media screen and (orientation: portrait) {
// CSS代碼
}

在以上代碼中，我們根據設備的橫豎屏方向，分別應用不同的CSS樣式，以適應不同的屏幕方向。這樣，就可以打造適應不同屏幕方向的網站。

總的來說，CSS媒體查詢是一項非常有用的CSS技術，可以幫助我們在不同設備上打造優秀的網站，提升用戶體驗。通過上面的例子，相信大家已經大概掌握了它的基本用法，快來試試吧！