CSS媒體查詢是用來設置響應式網頁設計的重要工具。為了讓頁面在不同設備上有更好的表現，我們需要使用不同的CSS樣式。而媒體查詢正是用來根據設備屬性來應用不同的CSS樣式。

/* 媒體查詢模板 */
/* 當屏幕寬度小于 768px 時 */
@media screen and (max-width: 768px) {
/* 這里是針對小屏幕的CSS樣式 */
}
/* 當屏幕寬度大于等于 768px 時 */
@media screen and (min-width: 768px) {
/* 這里是針對大屏幕的CSS樣式 */
}
/* 同時設置最大寬度和最小寬度 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 這里是針對寬度在768px和1024px之間的屏幕的CSS樣式 */
}

以上是基礎的媒體查詢模板。針對不同設備屬性，我們可以使用不同的媒體查詢條件來應用不同的CSS樣式。比如可以根據屏幕寬度、屏幕高度、屏幕方向、設備種類、像素密度等來設置媒體查詢條件。

除了上述基礎模板，我們也可以針對某些特定設備或者設備屬性來設置媒體查詢條件。例如下面這個例子：

/* 針對 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 屏幕的CSS樣式 */
}

這里的@media條件針對的是Retina屏幕，其中包含一些-webkit-、-moz-、-o-等廠商前綴，這是為了確保在不同廠商的設備上都能生效。我們也可以針對其他特定設備或屬性來設置媒體查詢條件。

總之，CSS媒體查詢在響應式網頁設計中是非常重要的工具，它可以讓我們根據不同設備屬性來應用不同的CSS樣式，使得頁面在不同設備上都有更好的表現。