CSS媒體查詢是前端開發中常用的技術之一。在移動設備越來越普及的今天，我們需要根據不同的設備屏幕大小來實現頁面的響應式布局。本文將介紹CSS媒體查詢的基本使用方法和語法規則。 首先，我們來看一下CSS媒體查詢的基本語法:

@media 媒體類型 and (媒體查詢條件){
CSS屬性
}

其中，媒體類型指的是顯示設備或輸出設備類型，比如screen（屏幕）、print（打印機）、handheld（手持設備）等。而媒體查詢條件則是用來檢查顯示設備屬性的表達式，通常包括min-width、max-width、orientation等。 下面，我們來看一個具體的例子：

@media screen and (max-width: 768px){
body {
font-size: 14px;
}
}

上面的代碼意思是當屏幕最大寬度為768像素時，將body的字體大小設置為14像素。在移動設備上，為了適應小屏幕，我們通常會設置較小的字體大小。 除了媒體查詢條件用法外，還有and/or運算符可以組合多個條件。比如：

@media screen and (max-width: 768px) and (orientation: portrait){
.container {
width: 100%;
}
}

代碼的意思是當屏幕最大寬度為768像素且方向為豎屏時，將.container的寬度設置為100%。 除了min-width、max-width、orientation以外，還有很多其他的條件，比如min-device-pixel-ratio、color-index、min-resolution等。使用媒體查詢可以為不同的設備設置不同的樣式，實現響應式布局。 總結一下，CSS媒體查詢大致的語法如下：

@media 媒體類型 and (媒體查詢條件1) and (媒體查詢條件2){
CSS屬性
}

在實際開發中，我們可以根據不同的設備類型和屏幕大小，設定不同的樣式，使頁面在不同終端上都能呈現出最佳的效果。如果你還沒掌握媒體查詢的用法，建議多多練習，相信不久的將來你也能成為前端開發的高手！