CSS中的Media查詢是一個非常有用的特性，它使得我們可以輕松的改變一些樣式屬性，以適應不同的設備類型和屏幕尺寸。Media的意思是媒介，它可以根據媒介的類型、寬度、高度和像素比例等條件來判斷當前媒介的屬性，從而設置不同的樣式。

Media的語法非常簡潔，按照以下格式書寫：

@media mediatype and (media feature){
/*在這里寫具體的樣式代碼*/
}

其中mediatype，指的就是媒介的類型，比如我們常用的屏幕就是screen；media feature，指代的則是需要判斷媒介的屬性。比如常見的可以判斷屏幕寬度的屬性有min-width和max-width。

下面是一個簡單的例子，當屏幕寬度大于等于768像素時，文字將會變成紅色。

@media screen and (min-width: 768px){
body{
color:red;
}
}

當然，Media除了判斷屏幕寬度，還可以判斷像素比例、媒介方向等幾乎所有與媒介相關的屬性，讓我們的樣式更加適配不同的設備。例如，下面這個例子就可以判斷是否是Retina設備，并顯示不同的圖片：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
/* 在這里寫Retina設備的樣式代碼 */
}

Media查詢可以讓我們的網站更加適應不同的設備，這一點在響應式布局中應用非常廣泛。了解Media查詢的原理和使用方法，在開發中可以更加靈活地運用，達到更好的用戶體驗。