CSS 媒體查詢是一個很強大的技術，它能夠在不同屏幕大小或設備上呈現不同的樣式。對于響應式設計非常重要。在此，我們將學習如何編寫 CSS 媒體查詢。

要編寫 CSS 媒體查詢，我們需要以下幾個步驟：

1. 首先，我們需要在 CSS 文件中定義需要查詢的樣式。

2. 其次，我們需要在媒體查詢的塊中定義特定于不同設備或屏幕大小的樣式。

3. 最后，我們需要將媒體查詢塊嵌套在 CSS 樣式中使用。

現在，讓我們看一個例子：

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

在此例子中，我們使用 @media 關鍵字來指定我們的媒體查詢，并在括號內指定我們的查詢規則。在這種情況下，我們使用 “screen” 來指定我們的查詢是針對屏幕的，并且我們指定我們的最大寬度是 768 像素。

然后，在大括號中，我們指定了我們的樣式。在這種情況下，我們指定了 body 元素的背景顏色為 lightblue 。

您可以根據需要添加更多的媒體查詢，并根據不同設備或屏幕大小指定樣式。

總之，CSS 媒體查詢是一個極具用途的技術，可以為我們的響應式設計帶來很大的幫助。使用它，可以輕松編寫針對不同屏幕大小或設備特定的樣式。