在网页开发中，让div元素跟随浏览器窗口大小自动调整尺寸是响应式布局的基础需求，通过合理的CSS设置可以轻松实现这个效果，适配不同尺寸的屏幕设备。
使用百分比单位设置尺寸
最基础的方式是直接给div的宽度、高度设置百分比单位，百分比是相对于父元素的对应尺寸计算的，如果父元素是body，那么就是相对于浏览器可视窗口的尺寸。
比如设置一个div宽度占窗口的80%，高度占窗口的50%，代码如下：
/* 重置body默认边距，避免影响百分比计算 */
body {
margin: 0;
padding: 0;
}
.adapt-div {
/* 宽度相对于父元素body，也就是窗口宽度的80% */
width: 80%;
/* 高度相对于父元素body，也就是窗口高度的50% */
height: 50%;
background-color: #f0f0f0;
/* 水平居中 */
margin: 0 auto;
}
对应的HTML结构：
<div class="adapt-div">我是随窗口变换的div</div>
使用flex弹性布局实现自适应
flex布局是更灵活的响应式布局方案，适合多列div同时随窗口变换的场景，不需要手动计算百分比，由浏览器自动分配空间。
比如实现两个div并排，窗口缩小时自动调整宽度，代码如下：
.flex-container {
display: flex;
/* 子元素宽度总和超过父元素时自动换行 */
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #e8e8e8;
}
.flex-item {
/* flex:1 表示子元素平分剩余空间 */
flex: 1;
/* 最小宽度，窗口小于这个值时换行 */
min-width: 200px;
height: 150px;
background-color: #b3d4fc;
margin: 10px;
}
对应的HTML结构：
<div class="flex-container">
<div class="flex-item">第一个div</div>
<div class="flex-item">第二个div</div>
</div>
使用媒体查询适配不同窗口尺寸
如果需要针对不同窗口宽度设置不同的div样式，可以使用CSS媒体查询，在窗口尺寸达到指定阈值时切换样式。
比如窗口宽度大于768px时div宽度为70%，小于768px时宽度为95%，代码如下：
.media-div {
height: 200px;
background-color: #ffcc99;
margin: 20px auto;
}
/* 窗口宽度大于等于768px时的样式 */
@media screen and (min-width: 768px) {
.media-div {
width: 70%;
}
}
/* 窗口宽度小于768px时的样式 */
@media screen and (max-width: 768px) {
.media-div {
width: 95%;
}
}
使用vw/vh视窗单位
vw是视窗宽度的百分比单位，1vw等于视窗宽度的1%，vh是视窗高度的百分比单位，1vh等于视窗高度的1%，使用这两个单位可以直接基于窗口尺寸设置div大小。
比如设置div宽度为50vw，高度为30vh，代码如下：
.vw-div {
/* 宽度为窗口宽度的一半 */
width: 50vw;
/* 高度为窗口高度的三分之一 */
height: 30vh;
background-color: #c9f7c9;
margin: 20px auto;
}
注意事项
- 使用百分比高度时，需要确保父元素有明确的高度设置，否则百分比高度可能不生效。
- flex布局的子元素如果设置了固定宽度，需要注意添加
flex-shrink属性，避免窗口缩小时被压缩过度。 - 媒体查询的断点设置需要结合实际的页面设计需求，常见的断点有768px、992px、1200px等。