CSS @media是一種用于在不同設備或屏幕尺寸上顯示不同樣式的CSS規則。通過媒體查詢，我們可以設置CSS樣式，以便在不同的設備或屏幕上顯示不同的布局，字體大小和顏色等等。以下是一個簡單的例子：

@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}

上面的代碼表示當屏幕寬度小于或等于600像素時，應用黃色的背景色。

在上面的例子中，我們使用了@media規則，后面跟著一個斷點（max-width: 600px）。意思是如果條件為真，就會應用媒體查詢內的CSS樣式。在這個例子中，如果屏幕寬度小于或等于600像素，就會將背景色設置為黃色。

以下是一些常見的媒體查詢：

• screen：適用于電腦屏幕、平板電腦和智能手機。
• print：適用于打印機和其他輸出設備。
• (min-width: xxxx): 當屏幕寬度大于或等于xxxx像素時。
• (max-width: xxxx): 當屏幕寬度小于或等于xxxx像素時。

在使用@media時，我們還可以結合其他CSS屬性，并且層疊媒體查詢。例如：

@media screen and (max-width: 600px) {
#header {
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
#header {
font-size: 16px;
}
}

在上面的代碼中，我們使用兩個媒體查詢。第一個媒體查詢表示當屏幕寬度小于或等于600像素時，應用18像素的字體大小。

而第二個媒體查詢表示當屏幕寬度小于或等于400像素時，應用16像素的字體大小。這里就演示了媒體查詢的層疊規則。

總而言之，CSS @media使我們能夠根據不同設備和屏幕尺寸來應用不同的樣式，以達到更好的用戶體驗。