随着移动设备和不同分辨率的电脑屏幕日益普及，将网站的布局和页面元素适应不同的屏幕尺寸变得越来越重要。为了实现这个目标，我们经常使用响应式设计技术来调整页面的布局和大小，以适应各种不同的屏幕大小。css中提供了一组用于监听屏幕大小变化的特殊规则和属性，称为媒体查询。
使用媒体查询时，我们可以根据屏幕大小或设备类型等条件来动态地调整某些css属性。为了监测屏幕尺寸变化，我们可以使用一些特殊事件或css属性。
在CSS中，我们可以使用@media规则来定义一组条件，当满足这些条件时将使用该规则定义的CSS样式。例如，使用以下规则来定义针对移动设备的CSS样式：
@media only screen and (max-width: 767px) {
/* Create rules here for mobile layout */
}
在上面的例子中，我们定义了一个媒体查询，使CSS样式仅适用于最大宽度为767像素的屏幕。在这种情况下，我们可以根据需要进行必要的布局更改，例如在屏幕较小的情况下隐藏某些元素，或重新排列页面布局以更好地适应较小的屏幕。
另一个常用的方法是使用window对象的resize事件来检测浏览器窗口的大小变化，如下所示：
window.addEventListener('resize', function() {
if (window.innerWidth < 768) {
/* Update layout for mobile devices */
}
else {
/* Update layout for larger screens */
}
}
);
在这个例子中，我们定义了一个resize事件，每当用户调整浏览器窗口大小时就会触发该事件。我们可以使用window.innerWidth属性检查当前浏览器窗口的宽度，然后根据条件重新排列布局或调整css样式。
无论是通过媒体查询还是resize事件，都可以通过css来监测屏幕大小变化，使用这种方法可以轻松地为各种不同尺寸和类型的设备优化您的网站。
