[分享]css3当窗口变化时

CSS3是前端开发领域中不可或缺的技术之一。在本文中，我们将讨论CSS3如何在窗口发生变化时表现出不同的效果。

@media (max-width: 600px) {
    body {
        background-color: #fff;
        font-size: 16px;
    }
} 

上面这段CSS代码使用了@media查询语句，其中(max-width: 600px)表示当窗口宽度小于或等于600像素时应用这些样式。在这种情况下，背景色将变成白色并且字体大小将变成16像素。

@media (min-width: 601px) and (max-width: 900px) {
    body {
        background-color: #f5f5f5;
        font-size: 18px;
    }
} 

在此示例中，(min-width: 601px)和(max-width: 900px)是一个范围区间的@media查询语句。 如果浏览器窗口大小不在这个范围内，那么这些样式并不会被应用。 当窗口大小在这个范围内时，背景色将变成浅灰色，字体大小将变成18像素。

@media (min-width: 901px) {
    body {
        background-color: #333;
        font-size: 20px;
    }
} 

在上面的例子中，我们使用了(min-width: 901px)查询语句。 这意味着当浏览器宽度大于或等于901像素时，应用这些样式。 在这种情况下，背景色将变成黑色，字体大小将变成20像素。

通过使用@media查询语句，我们可以改变CSS样式的外观，以使其适应不同的分辨率和屏幕大小。 这是CSS3的一个强大功能，使得网站可以更好的用户体验和更高的可用性。