CSS是前端开发人员经常使用的工具，可以对网页的样式进行控制。其中一个常见的效果就是随着窗口的大小改变而改变元素的尺寸。这种效果在响应式网站设计中非常重要。
CSS中有几种方法可以实现这个效果。第一种是使用百分比值。比如说，如果要一个元素的宽度随着窗口的改变而自适应，可以将它的宽度设置为百分比值。下面是一个例子：
.container {
width: 80%;
}
在这个例子中，容器的宽度设置为80%。这样，在窗口大小改变时，容器的宽度也会跟着改变。
另一个实现这个效果的方法是使用vw和vh单位。vw单位是视窗宽度的百分比，vh单位是视窗高度的百分比。下面是一个例子：
.container {
width: 50vw;
height: 50vh;
}
在这个例子中，容器的宽度和高度都是视窗的50%。这样，在窗口大小改变时，容器的尺寸也会自适应。
除了上面这些方法，还可以使用媒体查询来实现元素随着窗口大小改变而改变。媒体查询可以根据屏幕大小、设备类型等条件来加载不同的CSS样式。下面是一个例子：
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 769px) {
.container {
width: 50%;
}
}
在这个例子中，当屏幕宽度小于等于768px时，容器的宽度设置为100%。当屏幕宽度大于768px时，容器的宽度设置为50%。这样，在窗口大小改变时，容器的宽度也会跟着改变。
