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

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

• 腾讯云媒体处理服务：https://cloud.tencent.com/product/mps
• 腾讯云移动开发平台：https://cloud.tencent.com/product/mmp
• 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
• 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
• 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
• 腾讯云网络安全服务：https://cloud.tencent.com/product/ddos
• 腾讯云音视频服务：https://cloud.tencent.com/product/vod
• 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云存储服务：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务：https://cloud.tencent.com/product/baas
• 腾讯云元宇宙服务：https://cloud.tencent.com/product/vr