@media是CSS中的一種規則，用於媒體查詢（Media Query）。它允許您在不同的媒體和設備條件下應用不同的CSS樣式。媒體查詢是回應式網頁設計的關鍵組成部分，它使網頁可以根據用戶的設備特性或瀏覽器視窗的大小自動適應不同的佈局和樣式。

@media語法如下：

@media mediatype and (mediafeature) {
    /* 添加css樣式*/
}

mediatype：指定了要應用樣式的媒體screen（螢幕）、print（列印）、speech（语音合成器）等。
mediafeature：是一個或多個條件，用於確定應用樣式。條見包括螢幕寬度，高度，設備類型等。

以下是範例:

/* 在螢幕寬度小於600px時應用的樣式 */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/*在螢幕寬度大於600px時應用的樣式*/
@media (min-width: 800px) {
            .image-card {
                width: calc(33.33% - 20px);
       }
}

/* 在打應時應用的樣式 */
@media print {
    body {
        font-size: 12px;
    }
}

今天介紹就到這裡，我噴明天鐵人賽見