基本例子

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

上述媒體查詢指定了兩個條件：

1. 必須在普通螢幕（不是列印頁面，投影儀等）上檢視頁面。
2. 使用者視口的寬度必須至少為 720 畫素。

如果滿足這些條件，則媒體查詢中的樣式將處於活動狀態，並且頁面的背景顏色將為天藍色。

媒體查詢是動態應用的。如果在頁面載入時滿足媒體查詢中指定的條件，則將應用 CSS，但如果不再滿足條件，將立即禁用 CSS。相反，如果最初不滿足條件，則在滿足指定條件之前不會應用 CSS。

在我們的示例中，如果使用者的視口寬度最初大於 720 畫素，但使用者縮小瀏覽器的寬度，則一旦使用者將視口大小調整為小於 720 畫素，背景顏色將不再是天藍色。寬度。