当窗口宽度减小时，Div宽度逐渐增加(带媒体查询)

当窗口宽度减小时，Div宽度逐渐增加是通过使用媒体查询来实现的。媒体查询是CSS3中的一个功能，它允许根据设备的特性（如窗口宽度）来应用不同的样式。

媒体查询可以通过@media规则来定义，语法如下：

@media mediatype and (media feature) { CSS样式 }

在这个问题中，我们可以使用媒体查询来检测窗口宽度，并根据不同的宽度范围应用不同的样式。具体实现如下：

/* 默认样式 */
div {
    width: 100px;
}

/* 当窗口宽度小于600px时，Div宽度逐渐增加 */
@media screen and (max-width: 600px) {
    div {
        width: 200px;
    }
}

/* 当窗口宽度小于400px时，Div宽度进一步增加 */
@media screen and (max-width: 400px) {
    div {
        width: 300px;
    }
}

上述代码中，我们定义了三个样式规则：默认样式为Div宽度为100px，当窗口宽度小于600px时，Div宽度增加为200px，当窗口宽度小于400px时，Div宽度进一步增加为300px。

这样，当窗口宽度减小时，Div宽度会逐渐增加，通过媒体查询可以实现响应式布局，使页面在不同设备上都能有良好的显示效果。

腾讯云相关产品和产品介绍链接地址：