基本例子

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

上述媒体查询指定了两个条件：

1. 必须在普通屏幕（不是打印页面，投影仪等）上查看页面。
2. 用户视口的宽度必须至少为 720 像素。

如果满足这些条件，则媒体查询中的样式将处于活动状态，并且页面的背景颜色将为天蓝色。

媒体查询是动态应用的。如果在页面加载时满足媒体查询中指定的条件，则将应用 CSS，但如果不再满足条件，将立即禁用 CSS。相反，如果最初不满足条件，则在满足指定条件之前不会应用 CSS。

在我们的示例中，如果用户的视口宽度最初大于 720 像素，但用户缩小浏览器的宽度，则一旦用户将视口大小调整为小于 720 像素，背景颜色将不再是天蓝色。宽度。