要使用媒体查询来实现自适应网站页面元素尺寸的自动调整，可以按照以下步骤进行：

媒体查询的基本语法是使用 @media 关键字后紧跟一对圆括号，在圆括号中声明检测的媒体特性和值。例如：

   @media (min-width: 600px) {/*当视口宽度至少为600px时应用的样式*/
   }

这种方式可以根据不同的屏幕尺寸设置不同的样式。

可用于检测的媒体特性包括 width、height 和 color 等。这些特性可以帮助你根据设备的屏幕大小和方向来调整页面元素的显示效果。

在你的CSS文件中，为需要自适应的元素添加相应的媒体查询规则。例如，如果你想在小屏幕上（小于576像素）改变某个容器的背景颜色，可以在CSS中这样写：

   .container {background-color: lightblue; /*默认背景颜色*/
   }   @media (max-width: 575px) {.container {background-color: lightcoral; /*小屏幕上的背景颜色*/}
   }

这样，当浏览器窗口宽度小于或等于576像素时，.container 元素的背景颜色将变为浅红色。

如果页面布局较为复杂，可以使用弹性盒布局（Flexbox）与媒体查询结合使用。例如，当页面的结构发生变化时，可以通过媒体查询来调整元素的排列方式和大小。具体实现可以参考如下代码：

   .main-content {display: flex;flex-direction: column; /*默认布局*/
   }   @media (min-width: 768px) {.main-content {flex-direction: row; /*大屏幕上的布局*/}
   }

这样，当屏幕宽度大于或等于768像素时，.main-content 元素的布局将从垂直变为水平。

使用媒体查询不仅可以调整元素的尺寸和位置，还可以根据设备的特性进行更细致的样式调整。例如，可以针对不同设备的分辨率和方向提供不同的图像源或大小，以确保图像在各种设备上都能良好显示。

通过以上步骤，你可以有效地利用媒体查询来实现自适应网站页面元素尺寸的自动调整，从而提升用户在不同设备上的浏览体验。