CSS 基本范例

2024-04-12 03:00:05 571

示例

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

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

必须在普通屏幕（而不是打印的页面，投影仪等）上查看页面。

用户视口的宽度必须至少为720像素。

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

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

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