在網頁設計中，我們經常需要根據不同的設備或不同的瀏覽器特性來顯示不同的界面效果，這就需要用到CSS的media屬性。CSS的media屬性是指在不同的媒體類型或屏幕尺寸下，應用不同的樣式表或CSS規則。

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

上面的代碼表示，當屏幕的寬度大于等于768px時，應用灰藍色的背景。在上面代碼中，“@media”是指定媒體類型的關鍵字，“screen”是指屏幕媒體類型，“min-width”是指最小寬度，規定只有當屏幕寬度大于等于768px時，才應用{}里的樣式。

@media print {
body {
font-size: 14pt;
margin: 0;
padding: 0;
}
}

上面的代碼是一個print媒體類型的CSS規則，當用戶想打印網頁時，會應用這段CSS規則。在上面代碼中，我們指定了打印出來的文字大小為14pt，將margin和padding都設為0，用以去掉打印頁面中的不必要的空白。

除了screen和print媒體類型以外，CSS還有其他的媒體類型，比如all（所有設備）、tv（電視），這些媒體類型可以根據具體的情況來決定應該使用哪種樣式表或CSS規則。

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

最后一個值得一提的是，@media中的max-width和min-width也可以與其他單位一起使用，比如“max-width: 600px”，表示最大寬度為600像素。