CSS Media：適配不同設備的CSS樣式

CSS Media是CSS3所提供的一種新特性，它可以讓我們根據不同的設備或者屏幕尺寸以及瀏覽器類型等等，來為不同的用戶提供特定的CSS樣式。這就是所謂的響應式布局，它可以讓我們的網站適配不同的設備，從而提供更加友好的用戶體驗。

其中，CSS Media支持許多不同的媒體類型，比如：screen、print、speech、all等，通過設置@media規則來實現。例如，以下代碼顯示了如何針對不同設備應用特定樣式：

/* 為小屏幕設備設置樣式 */
@media screen and (max-width: 480px) {
/* 樣式代碼 */
}
/* 為大屏幕設備設置樣式 */
@media screen and (min-width: 768px) {
/* 樣式代碼 */
}
/* 針對打印設備設置樣式 */
@media print {
/* 樣式代碼 */
}

除了支持上述屬性之外，CSS Media還支持@media規則下的偽類，比如：:hover和:focus等。以下是一個應用偽類的樣例：

/* 針對鼠標懸停設備設置樣式 */
@media screen and (hover: hover) {
/* 樣式代碼 */
}
/* 應用:focus偽類以及鍵盤輸入設備樣式 */
@media screen and (hover: none) and (pointer: coarse) {
/* 樣式代碼 */
}

除了樣式的適配外，CSS Media還可以幫助我們適配不同類型的媒體資源，比如視頻。例如：

/* 應用于視頻元素 */
@media screen and (min-width: 640px) and (min-height: 480px) and (orientation: landscape) {
video {
/* 樣式代碼 */
}
}

通過使用CSS Media，我們可以針對不同的設備，適配不同類型的媒體資源，完善我們的網站樣式，提供更好的用戶體驗。