什么是媒體查詢？

媒體查詢是CSS3中的一個非常有用的功能，它可以根據設備的特性來修改CSS樣式。例如：根據設備的屏幕大小、屏幕方向、分辨率、顏色等特性，靈活地修改顯示效果，從而達到更好的用戶體驗。

怎么使用媒體查詢？

我們可以在CSS中使用@media關鍵字來定義一個媒體查詢，然后在{}內部設置相應的CSS樣式，根據不同設備的特性來進行不同的顯示效果。比如下面的例子：

@media screen and (max-width: 768px) {
	body {
background-color: #f0f0f0;
font-size: 16px;
	}
}
@media screen and (max-width: 480px) {
	body {
background-color: #fff;
font-size: 14px;
	}
}

上面的代碼做了什么？

在這個例子中，我們首先定義了一個@media screen and (max-width: 768px) {}媒體查詢，表示如果設備屏幕的最大寬度小于等于768像素，那么就執行這段CSS樣式，即將body元素的背景色修改為#f0f0f0，字體大小修改為16px。
接著，我們又定義了一個@media screen and (max-width: 480px) {}媒體查詢，表示如果設備屏幕的最大寬度小于等于480像素，那么就執行這段CSS樣式，即將body元素的背景色修改為#fff，字體大小修改為14px。
由于我們在不同的屏幕大小設置了不同的CSS樣式，因此可以靈活地適應不同設備的顯示，從而提升用戶體驗。

總結

媒體查詢是CSS中一個非常強大的功能，可以讓我們根據不同設備的特性來設置不同的CSS樣式，從而適應不同設備的顯示。使用媒體查詢，可以讓我們開發適配不同設備的響應式網站變得更加簡單和高效。